JavaScript 多重自增变量解决方案

Question

我有一个变量 ver i = 1。

我有一张表如下；

<table>
<tr class="testrow">
<td class="prev">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="next">&nbsp;</td>
</tr>
<tr class="testrow">
<td class="prev">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="next">&nbsp;</td>
</tr>
<tr class="testrow">
<td class="prev">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="next">&nbsp;</td>
</tr>
<tr class="testrow">
<td class="prev">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="next">&nbsp;</td>
</tr class="testrow">
<tr>
<td class="prev">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="next">&nbsp;</td>
</tr>
</table>

该表可能有更多行。我希望变量在单击 next 时将值增加 1，在单击 prev 时将值减少 1。这很容易做到。但我想要一些与行相关的变量。当我在第一行中单击 next 时，变量值应为 2，但当我在任何行中单击 next 或 prev 时，变量值不应更改其他行。所有其他行也应该如此。变量的最小值应为 1。

如果有人向我提供每行中间单元格中显示的变量的小提琴，将会很有帮助。请注意，在此演示中，它不应该是 ++ 或 -- 中间单元格中的文本或数据。

这里是我的小提琴。

Answer 1

我会使用 jQuery.data() 将变量存储在每一行中，并在用户点击上一个/下一个：

$(function() {

    $(".testrow").each(function() {
        var $row = $(this);
        // set the initial value  
        $row.data("currentIndex", 1);

        $row.find(".prev").click(function() {
            $row.data("currentIndex", $row.data("currentIndex") - 1);
            alert("currentIndex: "+$row.data("currentIndex"));
        });
        $row.find(".next").click(function() {
            $row.data("currentIndex", $row.data("currentIndex") + 1);
            alert("currentIndex: "+$row.data("currentIndex"));
        });

    });

});

jsFiddle：http://jsfiddle.net/5TPCK/12/

Answer 2

$('table tr .next').click(function() {
    alert($(this).closest('tr').index());
});

http://jsfiddle.net/ThiefMaster/5TPCK/2/

顺便说一句，< ;/tr class="testrow"> 是非常错误的 - 它应该只是 。

Answer 3

你不能保留这些计数器的数组（如果行数事先已知并且是静态的，这将起作用）？否则，您可以使用 jquery data() 函数将计数器附加到每个 元素。

请参阅：http://api.jquery.com/jQuery.data/