Jquery单击隐藏/显示div不起作用答案

【问题标题】：Jquery Click to hide/show div not workingJquery单击隐藏/显示div不起作用
【发布时间】：2011-06-24 09:24:25
【问题描述】：

需要使用一个按钮来切换 div 的显示和隐藏我的代码看起来像这样

function showTable(number){
 $('#div_'+number).show('slow');
 $('#button_'+number).html("Hide Table").click(function(){
 hideTable(number);
 return false;
 });
}

function hideTable(number){
 $('#div_'+number).hide('slow');
 $('#button_'+number).html("Show Table").click(function(){
 showTable(number);
 return false;
 });
}

<div id="div_1" style="display:none"></div>
<button id="button_1" onClick="javascript:showTable(1)">Show Table</button>
<div id="div_2" style="display:none"></div>
<button id="button_2" onClick="javascript:showTable(2)">Show Table</button>
<div id="div_1" style="display:none"></div>
<button id="button_3" onClick="javascript:showTable(3)">Show Table</button>

该功能起初运行良好。但是在我显示和隐藏一次之后，每当我尝试再次显示它时，它就会开始自行链接显示/隐藏/显示/隐藏而无需任何点击。我做的越多，链接的时间就越长。似乎这只是一个循环，每次循环次数加倍（如显示/隐藏 2/4/8/16/32 次 ....）我做的越多，它循环的时间就越长。有人知道发生了什么吗？

我试图删除 hideTable 函数中的点击部分，循环停止但仍然每当我尝试点击 showTable 时，它会自动显示然后隐藏它，就像它自动执行点击函数中的内容一样，无需任何点击.. .

还有没有使用jquery标记样式来调用函数而不是使用onclick？我知道我可以这样做

$("#button_1").click(function(){......................});
$("#button_2").click(function(){......................});
$("#button_3").click(function(){......................});

但是无论如何我可以将它们全部组合成一个函数并且仍然能够判断单击了哪个按钮？因为我需要一种方法来跟踪显示和隐藏哪个 div，并更改相应按钮中的文本。非常感谢您提前。 m(_ _)m

【问题讨论】：

很难准确地说出您想要做什么。您发布的代码中的标记都搞砸了；按钮应该在切换的<div> 元素内部还是外部？

标签： javascript jquery

【解决方案1】：

每次“点击”都会增加越来越多的冗余事件处理程序。这就是那些在处理程序中对“.click()”的调用所做的——添加另一个事件处理程序。

您只需添加一次事件处理程序。添加事件处理程序不会删除先前的处理程序。由于您使用的是 jQuery，因此请使用它来添加处理程序，而不是老式的“onclick”属性。

为所有<div> 元素赋予一个类值，例如“toggled”。

<div id="div_1" style="display:none" class='toggled'>

您可以对按钮执行相同的操作。然后，您可以设置事件处理程序，方法是使用该类在 jQuery 选择器中引用它们。

【讨论】：

是的，我想尝试一下，但不知道如何通过只编写一次函数并覆盖所有我想要的按钮来杀死它。按钮的数量是动态的，所以我需要某种方式来跟踪 ID 并切换它们对应的 div
感谢您指出问题。很高兴知道循环的实际情况

【解决方案2】：

更好的方法是使用切换。参考JQuery toggle showhide

【讨论】：

【解决方案3】：

你应该将你所有的 div 归为同一类，例如 class="toggleable" 在你想要切换的那些上。

那就试试吧：

jQuery(".toggleable input[type='button']").click(function()
{
    jQuery(this).closest("div.toggleable").toggle();
});

这将在您的 div 内的按钮上放置一个 onlick，它将找到最接近的父 div 类 toggleable 并将隐藏/显示您的 div。

阅读toggle()： http://api.jquery.com/toggle/
了解选择器： http://api.jquery.com/category/selectors/

【讨论】：

【解决方案4】：

我同意 Pointy 的观点，但由于我似乎无法补充答案，所以我必须再做一个。

$('[data-show-table]').click(function() {
   var $this_button = $(this);

   $('#div_' + $(this).attr('data-show-table')).toggle(function() {
       var msg = $(this).css('display') == 'none' ? 'Show table' : 'Hide table';
       $this_button.html(msg);
   });

});


<div id="div_1" style="display:none">Table 1</div>
<button id="button_1" data-show-table="1">Show Table</button>

<div id="div_2" style="display:none">Table 2</div>
<button id="button_2" data-show-table="2">Show Table</button>

<div id="div_3" style="display:none">Table 3</div>
<button id="button_3" data-show-table="3">Show Table</button>

【讨论】：