Question

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

到目前为止我的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.png
时钟arm1.png
时钟arm2.png
时钟arm3.png
时钟bullet.png

并在第二次点击时需要使用它：

时钟时钟2.png
时钟arm1-2.png
时钟arm2-2.png
时钟arm3-2.png
时钟子弹2.png

这需要继续总共三次点击然后再次使用第一个变量，我希望我已经清楚地解释了我的问题。

Answer 1

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

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，则可以在faceGroup[index]行中使用.css。

另一个想法：使用单个对象数组替换数组可能更容易，因为这样可以更容易保持它们排成一行并防止错误，例如，向一个数组添加额外的项目而忘记执行另一个。像这样：

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

Answer 2

您需要存储计数器变量。最简洁的方法是使用.data()将其存储在元素本身上：

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

http://jsfiddle.net/mblase75/D9mve/

Answer 3

创建一个像currentPosition这样的变量来存储clicked的相应元素。

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++;
    });

Answer 4

您需要记录您所做的点击次数。该按钮可以使用data方法自行完成。

$(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);

    });

}）;

每次点击时，内置的点击时间计数器会被一个碰撞，从而移动每个图片数组中的索引。

用javascript拆分括号中的变量

4 个答案: