1

当我单击tdwith class时，我试图触发一个事件toggle。当我单击带有 class 的 td 时toggle，我想显示所有下一个tr带有 class的内容hidethis。

但我似乎无法在td. 这是我到目前为止所得到的。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">  </script>
<script type="text/javascript">
$(document).ready(function () {

$(' td .toggle ').on('click',function(ev){


$(this).closest('tr').nextAll('tr .hidethis').show();


});

});

</script>
</head>
<body>



<table border="1">
<tr >
<td class="toggle">First Toggle</td>
</tr>
<tr class = "hidethis" style="display:none">
<td>Value 1</td>
<td>Value 2 </td>
<td>Value 3</td>
</tr>
<tr >
<td class="toggle">Second Toggle</td>
</tr>
<tr class = "hidethis" style="display:none">
<td>Value 4</td>
<td>Value 5 </td>
<td>Value 6</td>
</tr>
</table>

</body>
</html>

问题是当我单击tdwith 类时toggle，事件没有触发。请帮我。可能是我没有看到明显的东西。提前致谢。

4

3 回答 3

1

去掉选择器之间的空格，它有特定的含义：

选择作为给定祖先的后代的所有元素。

它应该是：

$('td.toggle')
于 2013-11-15T04:59:33.257 回答
1

删除 td 和 toggle 之间的空格

$(' td .toggle ').on('click',function(ev){

至

$('td.toggle').on('click',function(ev){
    ^

您的以下代码也存在同样的问题：-

$(this).closest('tr').nextAll('tr .hidethis').show();

至

 $(this).closest('tr').nextAll('tr.hidethis').show();
                                  ^

Working Demo

于 2013-11-15T04:59:33.490 回答
1

只需尝试喜欢

$(document).ready(function () {
    $('.toggle').on('click',function(ev){
       $(this).closest('tr').nextAll('tr .hidethis').show();
    });
});

或者删除 thetd和 its之间的空格classname

$('td.toggle').on('click',function(ev){
于 2013-11-15T04:59:52.547 回答