使用Javascript迭代表

这是我的小提琴：

html:

---

您会注意到在html中我有三个表。当我单击下一轮时，有没有办法改变下一张表格的背景颜色而不是当前硬编码表格的背景颜色？

类似的方法会有所帮助

var tables = $('.board table');
var currentTable = 0;

$('.next_round').click(function() {
    var table = tables[currentTable];

    table.find('td').each(function() {
        $(this).css("background-color", setRandomColor);
      });

    currentTable++;
    if(currentTable > tables.length){
       currentTable = 0;
    }
}

---

像这样的东西有用吗

var tables = $('.board table');
var currentTable = 0;

$('.next_round').click(function() {
    var table = tables[currentTable];

    table.find('td').each(function() {
        $(this).css("background-color", setRandomColor);
      });

    currentTable++;
    if(currentTable > tables.length){
       currentTable = 0;
    }
}

---

这是通过将当前表存储在变量中并使用.next查找下一个表来实现的：

---

这是通过将当前表存储在变量中并使用.next查找下一个表来实现的：

注意：这篇文章包含一个坏习惯，我留下了它，也许有人可以从中学习，阅读评论

只需使用一个表，如：

<table id="mastermind_table_three">
<td></td>
<td></td>
<td></td>
<td></td>
</table>

注意：这篇文章包含一个坏习惯，我留下了它，也许有人可以从中学习，阅读评论

只需使用一个表，如：

<table id="mastermind_table_three">
<td></td>
<td></td>
<td></td>
<td></td>
</table>

---

这是一个在jquery中实现事件数据的解决方案

这是一把小提琴：

---

然而，重构html可能会使以后的解决方案更简单

这是一个在jquery中实现事件数据的解决方案

这是一把小提琴：

---

然而，重构html可能会使以后的解决方案更简单

我会将已经着色的表ID存储在localSession中，然后迭代该数据。为所有3个表着色后，可以清除该表并重复该循环？对所有表使用公共类，存储索引变量，然后使用选择当前表。更好的是，使用一个表并使用.eq选择所需的行。我会将已经着色的表的ID存储在localSession中，然后迭代该数据。为所有3个表着色后，可以清除该表并重复该循环？对所有表使用公共类，存储索引变量，然后使用选择当前表。更好的方法是，使用一个表并使用.eq选择所需的行。删除$current.eachfunction{genius！感谢Mr.Code。这就像我希望的那样工作。非常感谢！删除$current.eachfunction{genius！谢谢Code先生。这就像我希望的那样工作。谢谢一吨！表。每个不需要的表。每个不需要的警告…这是js和html的混合，糟糕的示例。此外，它不会工作，因为你的函数名中有一个“-”，你对破折号的说法是正确的，这是一个错误，但是将html和java混合在一起脚本？！这对我来说是新的？！DOM操作不是使用jQuery的主要原因吗？！你可以操作DOM和其他操作，而不会用javascript名称污染HTML。当你的应用程序发展时，很难维护这样的代码。我当然要说很多关于信息的知识：警告…这是混合js-wihtml，糟糕的例子。除此之外，它不会起作用，因为你的函数名中有一个“-”，你对破折号的看法是正确的，这是一个错误，但是将html与javascript混合在一起？！这对我来说是新鲜事？！DOM操作不是使用jQuery的主要原因吗？！你可以操作DOM并在不污染环境的情况下执行其他操作带有javascript名称的HTML。当你的应用程序发展起来时，很难维护这样的代码。我当然要说的是很多关于信息的知识：

function nextRound(that) {
that.i = that.i ? (that.i + 1) : 1; 
$('table').removeClass("mastermind_table_" + that.i - 1);
$('table').addClass("mastermind_table_" + that.i);
}

var randomColor = ["red", "blue", "green", "#9CBA7F", "yellow", "#BF5FFF"];

function setRandomColor() {
    return randomColor[Math.floor(Math.random() * randomColor.length)];
}


$('.next_round').on("click", {i: 0}, function(e) {
    var selectorFragment = ["one","two","three"]

    $('#mastermind_table_'+selectorFragment[e.data.i]).each(function() {
      $(this).find('td').each(function() {
        $(this).css("background-color", setRandomColor);
      })
    })

    e.data.i += 1
    if (e.data.i === 3) e.data.i = 0 
})