jQuery单击以隐藏/显示div不起作用

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>

首先，该功能运行良好。 但是，一旦我显示并隐藏它一次，每当我尝试再次显示它时，它都会自动链接show / hide / show / hide，而无需任何点击。 而且我做的越多，链接的时间就越长。 看来这只是一个循环，每次循环次数加倍（例如show / hide 2/4/8/16/32倍....），我做的越多，循环就越长。 任何人都知道发生了什么事吗？

我试图删除hideTable函数中的click部分，循环停止，但是无论何时我尝试点击showTable，它都会显示并自动隐藏它，就像它自动执行click函数中的内容一样，没有任何点击...

还可以使用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切换showhide

Answer 3

您应该将所有div都移到同一类上，例如要切换的class="toggleable"上为class="toggleable" 。

然后尝试：

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

这将在div内的按钮上添加一个onlick按钮，该按钮会找到toggleable类的最接近的父div，并且可以隐藏/显示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>