Question

我有这个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="disabled"项：

$("div.disabled").hide() ;

当我单击同一行（tr）中的复选框时，我想显示禁用的div。我试过了

$("input.chk").click(function(){
  $(this).parent().parent().(".disabled").show();
}) ;

但它不起作用。

Answer 1

使用.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个元素绑定到。如果您要启用/停用，请使用change和.toggle()以及上述内容，如下所示：

$("table").delegate("input.chk", "change", function(){
  $(this).closest('tr').find(".disabled").toggle(this.checked);
});

这种方式如果被检查则显示，如果不是则隐藏。

Answer 2

是的，使用find()和closest()绝对是正确的程序。有不同的写作风格。代码段就在这里。

$("input.chk").click(function() {
      var th = $(this);
      $(".disabled", th.parent().parent()).show();
});

Answer 3

几乎。您只是错过了find这个词来表示jQuery's .find() method。

$("input.chk").click(function(){
  $(this).parent().parent().find(".disabled").show();
}) ;

或者，更短的版本是use .closest()。

$("input.chk").click(function(){
  $(this).closest('tr').find(".disabled").show();
});

您也可以use .parents()，但如果您有嵌套表格，则需要指示the :first匹配。

$("input.chk").click(function(){
  $(this).parents('tr:first').find(".disabled").show();
});

Answer 4

它实际上比这更容易。

    $(".disabled").hide();
    $(".chk").click(function(){
        if($(this).is(":checked"))
        {
            $(this).siblings(".disabled").show();
        }
        else
        {
            $(this).siblings(".disabled").hide();
        }
    });

我甚至添加了一些额外的功能，以便事件不仅触发一次，而是根据是否选中复选框进行切换。

Answer 5

而且更容易：

$(".disabled").hide();
$(".chk").click(function() {
    $(this).siblings(".disabled").toggle();
});

： - ）

Answer 6

现在可行：http://jsfiddle.net/WAQBj/2/

$(".disabled").hide();
$(".chk").click(function() {
    $(this).closest('tr').find(".disabled").toggle();
});

jQuery parent（）。（“selector”）

6 个答案: