Shuffle through an Array on button click

Question

I'm working on a way to turn a image, X amount of directions, on a left & right button click. Directions are controlled by numbers and some images got more directions, then others.Those directions are in a array, like this: 0, 2, 4, 6, 8. Always jumping 2.

Those numbers are picked up by the API, so i just need to add them to the url like this, and udpdate the <img> tag.

api.domain.com/image.png?dir=0

Atm. I assume that all images starts at 0, find the last digit and just plus/substract 2 on left/right click. But the problem is that not all images starts at 0 and not all images follow the rule of jumping 2. Meaning it will go like this: 0, 6, 8.

I would love to just shuffle though the array on left/right buttons, but i don't know how. Anyone who maybe could help me?

Script

var prev = $('#left');
var next = $('#right');
var image = $('#img');
var directions = '0, 2, 4, 6';

var max = directions[directions.length - 1];

// Turn Left
prev.click(function(){

    // Get current Direction
    var curDir = image.attr('data-direction');

    if(curDir >= 2){
        // Make new direction
        var newDir = parseInt(curDir) - parseInt(2);
        // Set new data-direcion
        image.attr('data-direction', newDir);
        // Find current image direction
        var url = image.attr('src');
        var fix = url.substring(url.lastIndexOf('=') + 1);
        // Set new image direction
        image.attr('src', url.slice(0,-1) + newDir);
    }
});
// Turn Right
next.click(function(){

    // Get current Direction
    var curDir = image.attr('data-direction');

    if(curDir <= max - 2){
        // Make new direction
        var newDir = parseInt(curDir) + parseInt(2);
        // Set new data-direcion
        image.attr('data-direction', newDir);
        // Find current image direction
        var url = image.attr('src');
        var fix = url.substring(url.lastIndexOf('=') + 1);
        // Set new image direction
        image.attr('src', url.slice(0,-1) + newDir);
    }
});

HTML

<img id="img" data-direction="0" src="api.domain.com/image.png?dir=0">

<button id="left">Left</button>
<button id="right">Right</button>

and we would love to see what you have done so far . your code? — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Feb 18, 2018 at 12:50
@MuhammadOmerAslam Hard to make it smaller, when all in that code area, is used for the turn left/right function. Agree, i could remove comments. But would just make the script less understandable? — lol25500
– lol25500, Commented Feb 18, 2018 at 13:04
what I was trying to say was to add the minimal HTML that is used with your script so that is it in the running condition and easier to troubleshoot or identify the issue. :) — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Feb 18, 2018 at 13:06

trincot · Accepted Answer · 2018-02-18 13:34:59Z

You can use a modulo operator on the index in the directions array (make sure it is an array and not a string), and avoid some code repetition:

var directions = '0, 2, 4, 6';
// Make directions an array instead of a string
directions = directions.split(', ');

function turn(dir) {
    var pos = directions.indexOf($('#img').attr('data-direction')),
        newPos = (pos + dir + directions.length) % directions.length,
        newDir = directions[newPos];
    
    $('#img').attr({
        "data-direction": newDir,
        src: $('#img').attr('src').replace(/\d+$/, newDir)
    });
    console.log("data-direction", newDir);
}

// Turn Left
$('#left').click(turn.bind(null, -1));
// Turn Right
$('#right').click(turn.bind(null, 1));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img" data-direction="0" src="api.domain.com/image.png?dir=0">

<button id="left">Left</button>
<button id="right">Right</button>

Collectives™ on Stack Overflow

Shuffle through an Array on button click

Script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Script

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related