Question

需要使用一个按钮切换节目并隐藏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

Answer 1

每次“点击”都会堆积越来越多的冗余事件处理程序。这就是那些在处理程序中调用“.click（）”的东西 - 添加另一个事件处理程序。

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

为所有<div>元素提供类值，例如“toggled”。

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

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

Answer 2

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

Answer 3

你应该把你所有的div放在同一个班级上，例如class="toggleable"你想要切换的那些。

然后尝试：

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

这会在你的div中的按钮上点击一下，它会找到最近的父级div toggleable并隐藏/显示你的div。

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

Answer 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>

Jquery点击隐藏/显示div不工作

4 个答案: