Question

我的HTML是：

<div class="board">
  <table id="mastermind_table_one">
     <td></td> # background color is green
     <td></td> # background color is blue
     <td></td> # background color is yellow
     <td></td> # background color is purple
 </table>

# I click the 'next_round' button and the function moves on to the next table

 <table id="mastermind_table_two">
     <td></td> # background color is yellow
     <td></td> # background color is orange
     <td></td> # background color is blue
     <td></td> # background color is green
 </table>

 # I click the 'next_round' button and the function moves on to the next table

 <table id="mastermind_table_three">
     <td></td> # background color is purple
     <td></td> # background color is blue
     <td></td> # background color is orange
     <td></td> # background color is yellow
 </table>

依旧......

我创建了一个随机填充表格背景颜色的函数。当我点击相同的“next_round”按钮时，问题在于填充下一个表格。现在，我为每个表都有3个单独的点击事件（在同一个按钮上），这是重复和浪费的。

可以这样做吗？

jsfiddle：http://jsfiddle.net/D3zyt/8/（你会看到它只填充第二行。我希望它能继续下一行......）

Answer 1

如果我理解正确，你可以这样做：

$(document).ready(function(){
    var current_table=0;
    var tables=$("table");

    //your code
    $('.next_round').click(function() {
        $(tables[current_table]).each(function() {
          $(this).find('td').each(function() {
            $(this).css("background-color", setRandomColor);
          })
        })
        if(current_table < tables.length){
            current_table++;
        }    
   })
});

在Javascript中移动到下一个表

1 个答案: