使用javascript拆分括号中的变量

我已经尝试过谷歌，但我无法找到我的问题的答案

到目前为止，我的javascript/jQuery：

$(function() {
    var faceGroup = ['clock-clock.png','clock-clock-2.png','clock-clock-3.png'];
    var arm1Group = ['clock-arm1.png','clock-arm1-2.png','clock-arm1-3.png'];
    var arm2Group = ['clock-arm2.png','clock-arm2-2.png','clock-arm2-3.png'];
    var arm3Group = ['clock-arm3.png','clock-arm3-2.png','clock-arm3-3.png'];
    var bulletGroup = ['clock-bullet.png','',''];

    $('button').click(function() {
        faceGroup.split(/*thirst click use clock-clock.png second click use clock-clock-2.png third click etc...*/);
        //do for everything
    });

    $('.holder').css('backgroundImage','url(' + faceGroup + ')');
    $('.hours').css('backgroundImage','url(' + arm1Group + ')');
    $('.minutes').css('backgroundImage','url(' + arm2Group + ')');
    $('.seconds').css('backgroundImage','url(' + arm3Group + ')');
    $('.bullets').css('backgroundImage','url(' + bulletGroup + ')');
});

当你点击按钮时，它将首先执行括号中的第一个变量，第二次点击时，它将使用第二个变量

因此，第一次单击使用：

• clock-clock.png

• clock-arm1.png

• clock-arm2.png

• clock-arm3.png

• clock-bullet.png

在第二次单击时，需要使用以下命令：

• clock-clock-2.png

• clock-arm1-2.png

• clock-arm2-2.png

• clock-arm3-2.png

• clock-bullet-2.png

---

这需要连续单击三次，然后它必须再次使用第一个变量，我希望我已经清楚地解释了我的问题。

创建一个变量，如

currentPosition

，以存储单击的相应元素

var currentPosition = 0;
$('button').click(function() {
        faceGroup[currentPosition];
        //do for everything
        if (currentPosition === 2)
           currentPosition = 0; //reset once it is reaches the last element in the array
        else 
           currentPosition++;
    });

---

你需要记录下你点击了多少次。按钮可以使用

数据

方法自行完成

$(function() {
    var faceGroup = ['clock-clock.png','clock-clock-2.png','clock-clock-3.png'];
    var arm1Group = ['clock-arm1.png','clock-arm1-2.png','clock-arm1-3.png'];
    var arm2Group = ['clock-arm2.png','clock-arm2-2.png','clock-arm2-3.png'];
    var arm3Group = ['clock-arm3.png','clock-arm3-2.png','clock-arm3-3.png'];
    var bulletGroup = ['clock-bullet.png','',''];

    $('button').click(function() {
        var clickedtimes=jQuery(this).data('clickedtimes') || 0;
        $('.holder').css('backgroundImage','url(' + faceGroup[clickedtimes] + ')');
        $('.hours').css('backgroundImage','url(' + arm1Group[clickedtimes] + ')');
        $('.minutes').css('backgroundImage','url(' + arm2Group[clickedtimes] + ')');
        $('.seconds').css('backgroundImage','url(' + arm3Group[clickedtimes] + ')');
        $('.bullets').css('backgroundImage','url(' + bulletGroup[clickedtimes] + ')');

       // bump index, reset if it's longer than the array length
       clickedtimes++;
       if(clickedtimes==faceGroup.length) clickedtimes=0;
       jQuery(this).data('clickedtimes',clickedtimes);

    });

}))

---

每次单击时，inned clickedtimes计数器都会被一个碰撞，从而移动每个图片数组中的索引。

使用变量跟踪数组中的当前索引，并在每次单击时更新它。例如：

var index = 0;
$('button').click(function() {
    var currFace = faceGroup[index];
    //do the same for your other arrays

    $('.holder').css('backgroundImage','url(' + currFace + ')');
    // etc

    // update index
    index = (index + 1) % faceGroup.length;     // Note we are assuming all the arrays are the same length!
});

请注意，如果您不需要变量

currFace

进行任何其他操作，只需在

.css

行中使用

faceGroup[index]

另一个想法是：用单个对象数组替换数组可能更容易，因为这样可以更容易地保持它们的对齐，并防止错误，例如，在一个数组中添加一个额外的项，而忘记在另一个数组中执行。大概是这样的：

var clocks = [
    { 
        face: 'clock-clock.png', 
        arm1: 'clock-arm1.png', 
        arm2: 'clock-arm2.png',
        arm3: 'clock-arm3.png',
        bullet: 'clock-bullet.png' 
    },
    { 
        face: 'clock-clock-2.png', 
        arm1: 'clock-arm1-2.png', 
        arm2: 'clock-arm2-2.png',
        arm3: 'clock-arm3-2.png',
        bullet: '' }, // etc
]

然后，您可以通过以下方式获得每个属性：

var currFace = clocks[index].face;
var arm1 = clocks[index].arm1;
// etc

---

您需要存储一个计数器变量。最干净的方法是使用

.data（）

将其存储在元素本身上：

$('button').click(function() {
    var idx = $(this).data('counter') % faceGroup.length;
    if (!idx) idx = 0;
    var img = faceGroup[idx];
    $(this).data('counter', idx+1);
});

---

@Blazemonger:

这需要继续进行三次单击，然后它必须再次使用第一个变量，

谢谢您的精彩回答。工作正常，只有一个问题：几乎在代码末尾的%是什么意思？@SakeSalverda:这是。适当地，这种使用

%

操作符循环的技巧有时被调用。