访问后本地存储Jquery不起作用？

Question

这是我的HTML

<div class="col-md-9">
  <table class="table table-striped table-bordered table-condensed">
    <thead>
      <tr style="background-color: white">
        <th> <i class="fa fa-male"></i> Name </th>
        <th><i class="fa fa-bars"></i> Particular</th>
        <th><i class="fa fa-envelope-o"></i>Unit</th>
        <th><i class="fa fa-map-marker"></i>Quantity</th>
        <th><i class="fa fa-phone"></i>From</th>
        <th><i class="fa fa-phone"></i>Date</th>
        <th><i class="fa fa-phone"></i>TAKE actions</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>COMB</td>
        <td>fasionable comb</td>
        <td>SVP</td>
        <td>3</td>
        <td>Bindibhatt1</td>
        <td>2014-03-22 18:15:34 UTC
        </td><td>
          <form action="/requisitions/2" class="button_to" method="get"><div><input class="po" data-confirm="Are you sure?" type="submit" ></div></form>

        </td>
      </tr>
      <tr>
      </tr>
    </tbody>
  </table>

</div>

这是我的JQ

$(window).load(function(){

    $(".po").click(function(){
        localStorage.setItem("visited" + $(this).index(), true);
        $(this).css("color", "red"); // visited
    });

    for(var i = 0, len = $(".po").length; i < len; i++){

        if(localStorage.getItem("visited" + i)){
            $(".po:eq(" + i + ")").css("color", "white"); // visited
        }else
        {
            $(".po:eq(" + i + ")").css("color", "black"); // not visited
        }
    }

});

问题是只能看到第一行的变化，当我添加另一行然后访问它时没有效果

Answer 1

只要改变这个：

localStorage.setItem("visited" + $(this).index(), true);

为此：

 localStorage.setItem("visited" + $(this).closest("tr").index(), true);

由于您获得了输入的索引，因此使用它始终为 0，我们将指向输入所在的 closest tr，然后我们获取它的索引。

Fiddle