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

how to pick a new index of an array by each click

本文关键字：新索引 索引 数组 选择 何通过 单击      更新时间：2023-09-26

我有一个函数，它包括一个颜色数组，还有一个按钮和一个文本标记。因此，每次单击后，函数都会获取数组的当前索引，将其显示在文本中，并在索引号中添加一个，以便下次显示下一个索引。

这是我的代码：

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

JSFIDDLE

知道吗？如何修复？目前它只显示第一个索引，不更新变量。

这是

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

无限版本。

您的返回太早。您还需要处理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());
}

您正在增加后返回，这保证了代码不会被执行。

试试。。。

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

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

这个怎么样：

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没有得到更新，因为您在从函数返回后将其递增。

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());
相关文章：