Question

我有一个像这样的基本HTML网格：

<table>
  <tr id="player1_race">
    <td class="active"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

我需要活动的类在单击时转到下一个td元素并从当前元素中删除。我有这样的事情：

var counter = 1;

$("#player1_race").click(function() {
   var counter = counter + 1
    $("#player1_race > td:nth-child('counter')").addClass('active');
    $('#player1_race > td.active').removeClass('active');
})

由于某种原因，无法访问计数器变量。

Answer 1

在您的代码中，

计数器变量是不必要的两次声明。

首先删除class active并添加当前

的类

var counter = 0;

$("#player1_race").click(function() {
    counter = counter + 1;
    $('#player1_race  td.active').removeClass('active');
    $(this).find("td").eq(counter).addClass('active');
});

Fiddle

Answer 2

你有几个问题。首先，在单击处理程序中使用var正在改变变量的范围，因此您需要将其删除。其次，您没有正确地将变量连接到字符串选择器。在这种情况下，最好还是使用eq()。最后，元素索引从0开始，因此counter应该以该值开头。试试这个：

var counter = 0;

$("#player1_race").click(function() {
    counter++;
    $("#player1_race > td").removeClass('active').eq(counter).addClass('active')
});

Example fiddle

计数器变量内部功能

2 个答案: