Javascript Jquery单击以隐藏/显示未工作的div

需要使用一个按钮来切换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>

---

但是，我是否可以将所有按钮组合到一个函数中，并且仍然能够判断单击了哪个按钮？因为我需要一种方法来跟踪显示和隐藏哪个div，并更改相应按钮中的文本。事先非常感谢。m（_um）

每次“单击”都会堆积越来越多的冗余事件处理程序。这就是处理程序中对“.click（）”的调用所做的-添加另一个事件处理程序

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

给所有那些

元素一个类值，比如“toggled”

---

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

更好的方法是使用toggle。请参阅

您应该将所有div设置为同一类别，例如

class=“toggleable”

设置为要切换的div

然后尝试：

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

这将在您的div内的按钮上放置一个onlick，该按钮将找到类

toggleable

最接近的父div，并将隐藏/显示您的div

• 要阅读有关切换（）的信息，请执行以下操作：
• 要了解选择器，请执行以下操作：

---

我同意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>

$（“[数据显示表]”）。单击（函数（）{
var$this_按钮=$（this）；
$（'#div'+$（this.attr（'data-show-table'））.toggle（function（）{
var msg=$（this.css（'display'）=='none'？'Show table'：'Hide table'；
$this_button.html（msg）；
});
});
表1
展示台
表2
展示台
表3
展示台

很难说清楚你到底想做什么。你发布的代码中的标记都是乱七八糟的；按钮应该在切换的
元素内部还是外部？是的，我想尝试一下，但不知道如何只编写一次函数就可以杀死它，并覆盖所有我想要的按钮。按钮的数量是动态的，因此我需要某种方法来跟踪ID并切换其相应的分区。感谢您指出问题所在。很高兴知道循环的实际情况

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

$('[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>