jQuery：隐藏/显示基于点击按钮的表格行

我在页面上并排了两张桌子。左表包含带公司名称的按钮，右表应包含连接到特定公司的员工。jQuery：隐藏/显示基于点击按钮的表格行

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

按钮有一个公司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代码来自另一个问题，它有相同的问题，但与我的不同。最后但并非最不重要的是，有多少公司或员工在那里展示数量不是固定的，数据是从数据库中提取的。

来源

2017-03-15 Ceriana

也许这：'$（ 'clickbtn'）点击（函数（）{VAR btnID = $（本）.attr（ “ID”）; $（ “＃trclass” + btnID）.toggle （）;}）;' – Santi

这里的重要性是了解jQuery的$(this)和普通的旧javascript的差异event.target。

考虑this example。

大蓝框是我们的按钮，它包括里面的所有红框。请注意，当您将鼠标悬停在它们上方时：$(this)始终指的是事件绑定到的元素。因为我们的活动绑定了按钮点击，$(this)总是指按钮。

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

出于这个原因，我真的觉得你的解决方案很简单：使用jQuery的$(this)而不是event.target。

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

如果你想只点击的按钮的行显示，则可以隐藏全部使用.hide()其他人。如果你给你的表一个ID，你可以通过做$("#my-table-id tr")来选择所有的行，但在你的情况下，你需要使用“starts with”选择器[id^=trclass]。如果这是该页面上的唯一表格，请考虑使用$("tr")，该选项可选择页面上的每个表格行。。

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

来源

2017-03-15 22:55:07 Santi

谢谢，这是想要它打算做的。要隐藏没有匹配id的行，我将代码更改为'$（“[id^= trclass]”）。hide（）; $（ “[ID = trclass” + btnID）.show（）;'。它有效，但这是隐藏所有其他行的唯一方法吗？只是好奇。 – Ceriana

请注意jQuery中的选择器：例如，'$（“＃my-id”）'选择一个元素'id =“my-id”'，'$（“。my-class”）'选择一个元素元素'class =“my-class”'，最后'$（“button”）'选择一个元素'

该问题听起来是由于元素被动态创建的缘故。为了解决这个问题，你需要点击处理程序附加到总是存在的页面，这反过来又代表的Click事件上的元素：

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

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

希望这会有所帮助！ :)

来源

2017-03-15 22:41:08

我想冒险猜测，如果OP不知道jQuery，“从数据库中提取”的元素不是动态创建的，而是在页面加载。其次，'event.target.id'并不总是以正确的元素为目标，如果事实上在处理程序中有多个元素 - 当我的意图是要获取该元素的ID时，使用'event.target.id'似乎很奇怪引发事件的DOM元素。第三，@RobertFrenette，活动听众会花费你的工作效率。为什么每个事件都有一个侦听器，而不是一个侦听器来处理它们呢？ – Santi

你的解决方案似乎仍然是随机的。上述@Santi提供的解决方案按预期工作。 – Ceriana

啊，我想这些元素不是动态创建的。我向@Santi承认;他似乎已经找到了有效的解决方案:) –

jQuery：隐藏/显示基于点击按钮的表格行

回答

相关问题