javascript - 单击按钮时随机播放数组

Question

我正在研究一种通过单击左右按钮来将图像旋转 X 个方向的方法。方向由数字控制，有些图像有更多方向，然后是其他图像。这些方向位于数组中，如下所示:0, 2, 4, 6, 8 。一直在跳2 .

这些数字由 API 获取，因此我只需将它们添加到像这样的 url 中，然后更新 <img>标签。

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

自动取款机。我假设所有图像都从 0 开始，找到最后一位数字并加/减 2左/右键单击。但问题是并非所有图像都以 0 开头并非所有图像都遵循跳跃规则2 。这意味着它会像这样:0, 6, 8 .

我很想在左/右按钮上的数组中进行随机播放，但我不知道如何操作。有谁可以帮助我吗？

脚本

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>

Answer 1

您可以对 directions 数组中的索引使用模运算符(确保它是数组而不是字符串)，并避免一些代码重复:

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>