Question

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

当您加载页面时，不应该是任何员工。如果用户单击其中一个按钮，则应显示与该公司连接的员工的表行。如果我再次点击相同的按钮或其他按钮，员工行应该隐藏（新的行会弹出）。

这些按钮有一个带有公司ID（1,2,3 ..）的类，并且这些行有一个类似于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代码来自另一个问题，它有着完全相同的问题，但与我的不同。最后但并非最不重要的是，没有多少公司或员工可以展示，数据是从数据库中提取的。

Answer 1

这里重要的是理解jQuery的$(this)和普通的旧javascript event.target之间的区别。

考虑this example。

大蓝框是我们的按钮，它包含了里面的所有红色框。请注意，当您将鼠标悬停在它们上方时：$(this)始终引用与事件关联的元素。由于我们的活动与按钮相关联，因此$(this)始终引用按钮。

另一方面，

event.target在很多情况下几乎是太具体。当您将鼠标悬停在红色框上时，您会注意到event.target指的是正在悬停的元素。通过event.target.id，您将获得div的ID而不是按钮。

出于这个原因，我认为你的解决方案非常简单：使用jQuery的$(this)代替event.target。

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

如果您只想显示单击按钮的行，则可以使用.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();
});

Answer 2

问题听起来是由于动态创建的元素。为了解决这个问题，您需要将点击处理程序附加到页面上始终存在的元素，然后委派点击事件：

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

在上面的示例中，点击处理程序附加到document，只要点击.clickbtn就会触发。这应该会使点击每次都有效。

希望这有帮助！：）

jQuery：根据点击的按钮隐藏/显示表格行

2 个答案: