Question

我想使用链接来切换div元素的可见性。该链接最初包含类abstractShow，因此我尝试使用以下代码进行切换。但是，它仅适用于第一次点击（通过显示div），abstractHide的点击事件永远不会在后续点击中触发。

  $("a.abstractShow").click(function(){
      $(this).html('Hide')
      $(this).addClass("abstractHide");
      $(this).removeClass("abstractShow");
      $(this).next("div.abstract").show("fast");
  });
  $("a.abstractHide").click(function(){
      $(this).html('Show')
      $(this).addClass("abstractShow");
      $(this).removeClass("abstractHide");
      $(this).next("div.abstract").hide("fast");
  });

Answer 1

使用此，

$("a.abstractHide").on('click', function(){
      $(this).text('Show')
      $(this).addClass("abstractShow");
      $(this).removeClass("abstractHide");
      $(this).next("div.abstract").hide("fast");
});
$("a.abstractHide").on('click', function(){
      $(this).text('Show')
      $(this).addClass("abstractShow");
      $(this).removeClass("abstractHide");
      $(this).next("div.abstract").hide("fast");
});

Answer 2

使用事件处理程序绑定事件时，您可以使用选择器，例如$("a.abstractHide")。这会在当前HTML中查找与 绑定时 的选择器匹配的所有元素。因此，当稍后更改类时，事件不会神奇地绑定到该元素，因为它在您最初绑定事件时没有该类。

使用on（）的事件委托是一个选项，另一个是使用toggle();

$("a.abstractShow").on('click', function(){
    var state = $(this).hasClass('active');
    $(this).html(state ? 'Hide' : 'Show')
           .toggleClass('active')
           .next("div.abstract").toggle(state);
});

Answer 3

这就是你所需要的： 的 LIVE DEMO

$("a.abstractShow").click(function( e ){ e.preventDefault(); $(this).text( $(this).text()=='Show'?'Hide':'Show' ) .next(".abstract").toggle(400); });

使用jQuery更改div可见性

3 个答案: