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

ubof19bj 于 2023-08-04 发布在 jQuery

关注(0)|答案(5)|浏览(100)

需要使用一个单一的按钮来切换显示和隐藏的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，而不需要任何点击。我做得越多，它链接的时间就越长。看起来它只是一个循环，每次它的循环量加倍（比如显示/隐藏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

jquery

来源：https://stackoverflow.com/questions/6461869/jquery-click-to-hide-show-div-not-working

5条答案

按热度按时间

vom3gejh1#

每一次“点击”都会堆积越来越多的冗余事件处理程序。这就是在处理程序中调用“.click（）”所做的-添加另一个事件处理程序。
您只需要添加一次事件处理程序。并且添加事件处理程序并不移除前一个处理程序。由于您使用的是jQuery，因此使用它来添加处理程序，而不是老式的“onclick”属性。
给予所有这些<div>元素一个类值，比如“toggled”。

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

字符串
你也可以对按钮做同样的事情。然后，您可以通过使用类在jQuery选择器中引用它们来设置事件处理程序。

赞(0）回复(0）举报 2023-08-04

ldfqzlk82#

你应该把你所有的div都设置为同一个类，比如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/的

赞(0）回复(0）举报 2023-08-04

fcwjkofz3#

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

字符串

赞(0）回复(0）举报 2023-08-04

blmhpbnm4#

<div id="div_1" style="display:none">Table 1</div>
<button class="toggle-button" data-target="1">Show Table</button>

<div id="div_2" style="display:none">Table 2</div>
<button class="toggle-button" data-target="2">Show Table</button>

<div id="div_3" style="display:none">Table 3</div>
<button class="toggle-button" data-target="3">Show Table</button>

字符串
JS/JQUERY**

$(document).ready(function () {
  $(document).on("click", ".toggle-button", function () {
    var targetNumber = $(this).data("target"); /

    if ($("#div_" + targetNumber).is(":visible")) {
  
      hideTable(targetNumber);
    } else {
     
      showTable(targetNumber);
    }
  });
});

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

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

型

赞(0）回复(0）举报 2023-08-04

nx7onnlm5#

更好的方法是使用toggle。参见JQuery toggle showhide

赞(0）回复(0）举报 2023-08-04