jquery - 使用 jQuery 更改 div 的可见性

Question

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

  $("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);
});