Javascript jQuery：基于单击的按钮隐藏/显示表行

我有两张桌子并排放在一页纸上。左表包含带有公司名称的按钮，右表应包含连接到特定公司的员工

当你加载页面时，不应该有任何员工。如果用户单击其中一个按钮，则应显示包含连接到此公司的员工的表行。如果我再次单击同一个按钮或其他按钮，员工行应该隐藏起来，并弹出新的行

按钮有一个公司id为1、2、3..的类，行有一个id为trclass1、trclass2..的类

我尝试使用此功能：

    $(document).ready(function()
    {
        $(".clickbtn").click(function(event)
        {
            $('[id=trclass'+event.target.id+']').toggle();
        });
    });

clickbtn是按钮的名称，trclass是表行的类

<button id='1' class='clickbtn' />
<button id='2' class='clickbtn' />
.
.

<tr id='trclass1' hidden> ...
<tr id='trclass2' hidden> ...
.
.

它有时起作用。如果它起作用或不起作用，似乎没有模式

---

我的问题是，除了对jQuery一无所知外，如何将参数正确地传递给函数并使其每次都能工作。上面的jQuery代码来自另一个问题，这个问题有着完全相同的问题，但在某种程度上不同于我的问题。最后但并非最不重要的一点是，要显示的公司或员工数量并不是固定的，数据是从数据库中获取的。

问题听起来是由于动态创建的元素造成的。为了避免这种情况，您需要将click处理程序附加到页面上始终存在的元素，该元素反过来委托click事件：

在上面的示例中，单击处理程序被附加到文档，每当单击.clickbtn时，该文档都会激发。这将导致每次单击都起作用

---

希望这有帮助！：

这里的重要性在于理解jQuery的$this和普通的javascript event.target之间的区别

考虑一下

蓝色的大盒子是我们的按钮，里面有所有的红色盒子。请注意，当您将鼠标悬停在它们上面时：$这总是指事件绑定到的元素。因为我们的事件与按钮点击有关，$这总是指按钮

另一方面，event.target在许多情况下几乎过于具体。当您将鼠标悬停在红色框上时，您会注意到event.target引用的正是被悬停的元素。通过执行event.target.id，您将获得div的id，而不是按钮的id

因此，我认为您的解决方案非常简单：使用jQuery的$this而不是event.target

如果只希望显示单击按钮的行，则可以使用.hide隐藏所有其他行。如果为表指定了一个ID，则可以通过执行$my table ID tr来选择所有行，但是在您的情况下，您需要使用带开头的选择器[ID^=trclass]。如果这是页面上唯一的表，请考虑使用$TR，它选择页面上的每个表行。

$('.clickbtn').click(function() { 
    var btnID = $(this).attr("id");
    $("[id^=trclass]").not(this).hide();
    $("#trclass"+btnID).toggle();
});

---

可能是：$'.clickbtn'.clickfunction{var btnID=$this.attrid；$trclass+btnID.toggle；}；我大胆猜测，如果OP不知道jQuery，那么从数据库获取的元素不是动态创建的，而是在pageload上创建的。其次，如果事实上处理程序中有多个元素，event.target.id并不总是以正确的元素为目标-在我看来，当意图获取触发事件的DOM元素的id时，使用event.target.id似乎很奇怪。第三，@RobertFrenette，事件侦听器会降低效率。为什么每个事件都有一个监听器，而不是一个监听器处理所有事件？对于您的解决方案来说，这似乎仍然是随机的。上面@Santi提供的解决方案按预期工作。啊，我猜元素当时不是动态创建的。我向@Santi让步；他似乎已经找到了有效的解决办法：谢谢你，这是我们想要的。为了隐藏没有匹配id的行，我将代码更改为$[id^=trclass].hide$[id=trclass+btnID.show；。这是有效的，但这是隐藏所有其他行的唯一方法吗？只是好奇。注意jQuery中的选择器很重要：例如，$my id选择一个元素id=my id，$。my class选择一个元素class=my class，最后，$button选择一个元素。我将修改我的答案以满足您的需要。

$('.clickbtn').click(function() { 
    var btnID = $(this).attr("id");
    $("#trclass"+btnID).toggle();
});

$('.clickbtn').click(function() { 
    var btnID = $(this).attr("id");
    $("[id^=trclass]").not(this).hide();
    $("#trclass"+btnID).toggle();
});