next()不起作用 [英] next() not working

问题描述

我有一个表结构:

<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>

现在，在加载时，第二行和第四行被隐藏.单击<a>时，其紧接的下一行<img>应显示.

Now, on load, 2nd and 4th row are hidden. On click of <a> its immediate next rows <img> should come into display.

为此，我写了:

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

有任何线索吗?

单击第一行的<a>，它应该显示第二行的<img>，单击第三行的<a>，它应该显示第四行的<img>，一次只显示一个<img>.

On click of 1st row's <a>, it should show 2nd row's <img> and on click of 3rd <a>, it should show 4th row's <img>, and only one <img> at a time.

CSS

.cc {
  display: none;
}

推荐答案

编辑:基于进一步的说明，您需要再次单击以关闭打开的图像.

Based on further clarification, you want a second click to close an open image.

执行此操作:

$(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();
});

---

编辑:基于澄清，您似乎想在下一行显示图片，然后隐藏其余图片.

---

Based on clarification, seems like you want to show the image in the next row, and hide the rest.

执行此操作:

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

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

原始答案:

执行此操作:

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

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

jQuery's .next() only looks at the siblings of the element.

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

You need to traverse up to the .closest() <tr> element, get the .next() row, then .find() the .cc element.

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

我还假设您要将类名传递给.toggleClass()，而不是不带参数地调用它.

I also assume you're passing a class name to .toggleClass() instead of calling it without an argument.

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

Otherwise, to display the <img> you would probably use .show().

这篇关于next()不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！