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

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

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

假设您将 css 类添加到那些名为 的 divdiv1InsideClass1中，这应该可以解决问题

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