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>