next（）不工作

Question

我有一个表结构：

<tr>
  <td>
    <a href="#" class="xx"></a>
  </td>
  <td>
    data
  </td>
</tr>
<tr>
  <td> 
    <img src="#" class="cc" />
  </td>
</tr>
<tr>
  <td>
    <a href="#" class="xx"></a>
  </td>
  <td>
    data2
  </td>
</tr>
<tr>
  <td> 
    <img src="#" class="cc" />
  </td>
</tr>

现在，在加载时，隐藏第2和第4行。点击<a>后，其下一行<img>将会显示。

为此，我写了：

$("a.xx").click(function (event) {
  $(this).next(".cc").toggleClass();// not working
});

有任何线索吗？

修改

点击第1行<a>后，它会显示第2行的<img>，点击第3行<a>时，它应显示第4行<img>，只显示<img> { {1}}一次。

CSS

.cc {
  display: none;
}

Answer 1

编辑：根据进一步的说明，您需要再次点击以关闭打开的图片。

这样做：

$(this).closest('tr').next('tr').find("img.cc").toggle()
       .closest('tr').siblings('tr').find("img.cc").hide();

或者这个，效率更高一点：

$(this).closest('tr').next('tr').find("img.cc").toggle(0, function() {
       var $th = $(this);
       if( $th.is(':visible') )
           $th.closest('tr').siblings('tr').find("img.cc").hide();
});

---

编辑：根据说明，您似乎想要在下一行显示图片，并隐藏其余部分。

这样做：

$(this).closest('tr').next('tr').find("img.cc").show()
       .closest('tr').siblings('tr').find("img.cc").hide();

• http://api.jquery.com/siblings/

---

原始回答：

这样做：

$(this).closest('tr').next('tr').find("img.cc").toggleClass('someClass');

jQuery的.next()仅查看元素的兄弟。

您需要遍历.closest() <tr>元素，获取.next()行，然后.find() .cc元素。

• http://api.jquery.com/closest/
• http://api.jquery.com/next/
• http://api.jquery.com/find/

我还假设您将类名传递给.toggleClass()，而不是在没有参数的情况下调用它。

否则，要显示<img>，您可能会使用.show()。