我有这个HTML代码:
<tr> <td><input type="checkBox" class="chk" /></td> <td><div class="disabled">text to hide 1</div></td> <td><div class="disabled">text to hide 2</div></td> </tr>
我使用jQuery隐藏所有class =“禁用”项目:
$("div.disabled").hide() ;
当我点击同一行(tr)中的复选框时,我想显示disabled divs。
我试过了
$("input.chk").click(function(){ $(this).parent().parent().(".disabled").show(); }) ;
但它不工作。
解决方法
使用
.closest()
和
.find()
,像这样:
$("input.chk").click(function(){ $(this).closest('tr').find(".disabled").show(); });
你当前的代码几乎工作,你需要一个.find()
虽然,像这样:
$(this).parent().parent().find(".disabled").show();
如果你有这么多行,使用.delegate()
,像这样:
$("table").delegate("input.chk","click",function(){ $(this).closest('tr').find(".disabled").show(); });
.delegate()
而是将一个处理程序绑定到所有的input.chk元素的表以冒泡。如果你想启用/禁用,使用更改和.toggle()
除了上述,像这样:
$("table").delegate("input.chk","change",function(){ $(this).closest('tr').find(".disabled").toggle(this.checked); });
这种方式如果检查他们显示,如果不是他们隐藏。