Question

我基本上有多个这样的元素：

<tr class="class1">
...
</tr>
<tr class="class1">
...
</tr>
<tr class="class1">
...
</tr>
<tr class="class1">
...
</tr>

等。我想要像这样请求DOM：

dom.query(".class1").live("click", function() {
    if (dom.query("#div1InsideClass1").is(':visible')) {
        dom.query("#div1InsideClass1").hide();
        ...
    } else {
        dom.query("#div1InsideClass1").show();
        ...
    }
});

但是这个函数的工作方式是它为上面的每个实例以及＃div1InsideClass1的每个实例执行函数。有没有办法检测点击了哪个特定的tr元素？我听说.next（）函数通常有帮助，但我不确定。

Answer 1

你有一个root问题：你的html上不能有重复的id。你首先需要解决这个问题。

假设您将一个css类添加到名为div1InsideClass1的div中，这应该可以解决这个问题

$(".class1").live("click", function() {
    $(this).find('.div1InsideClass1').toggle();
});

如果您需要继续使用if语句，此代码是等效的，但允许您在if else

中添加额外的逻辑

$(".class1").live("click", function() {
    var $this = $(this);
    var $div = $this.find('.div1InsideClass1');
    if ($div.is(':visible')) {
        $div.hide();
        ...
    } else {
        $div.show();
        ...
    }
});

仅显示/隐藏一个元素的DOM

1 个答案: