Question

我有一个功能，它包含一系列颜色，还有一个按钮和一个文本标签。因此，每次单击后，该函数将获取数组的当前索引，在文本中显示它并在索引号中添加一个，以便下次显示下一个索引。

这是我的代码：

var mycolor = 0;

var color = function() {
    var list = ["red", "blue", "green"];    
    return list[mycolor];
    mycolor++;
};

function run(){
    $(".demo").text(color());
}

JSFIDDLE

有什么想法吗？怎么解决？目前它只显示第一个索引，它不会更新变量。

Answer 1

你的回归太早了。当mycolor超过数组长度时，您还需要处理。

var color = function() {
    var list = ["red", "blue", "green"];    

    if (mycolor >= list.length)
       mycolor = 0;

    return list[mycolor++];
};

编写上述内容的另一种方法如下：

var color = function() {
    var list = ["red", "blue", "green"];    
    return list[mycolor++ % list.length];
};

function run(){
    $(".demo").text(color());
}

Answer 2

这是为了

var mycolor = 0;
var maxcolor = 0
var color = function() {
    var list = ["red", "blue", "green"];    
    maxcolor = list.length;
    if((mycolor + 1) > maxcolor)
    {
        mycolor = 0
    }
    return list[mycolor++];
    
};

function run(){
    $(".demo").text(color());
}

无限版。

Answer 3

您正在递增帖子返回，这可以保证代码不会被执行。

尝试类似......

var color = function() {
    var list = ["red", "blue", "green"];    
    return list[mycolor++];
};

返回数字然后递增它。您可能应该% list.length来调用超出数组长度的调用将包装结果而不是返回undefined（除非当然，这就是您想要的）。

Answer 4

这个怎么样：

var mycolor = 0;
var list = ["red", "blue", "green"]; 

var color = function() {
    return list[mycolor];
};

function run(){
    $(".demo").text(color());
    mycolor++;
    if(mycolor > 2) {
        mycolor = 0;
    }
}

mycolor没有获得更新，因为您已经从函数返回后将其递增。

Answer 5

This is the only one that will work because it's the only code that includes a click event.

var mycolor = 0;
var maxcolor = 0
var color = function() {
    var list = ["red", "blue", "green"];    
    maxcolor = list.length;
    if((mycolor + 1) > maxcolor)
    {
        mycolor = 0
    }
    return list[mycolor++];

};

$(".demo").text('on', 'click', color());

如何通过每次单击选择一个新的数组索引

5 个答案: