1

リンクを使用して、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");
  });
4

3 に答える 3

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");
});
于 2013-03-04T03:34:31.233 に答える
1

イベント ハンドラーでイベントをバインドする場合は、 のようなセレクターを使用します$("a.abstractHide")。これは、バインド時にそのセレクターに一致する要素を現在の HTML で検索します。したがって、後でクラスを変更すると、最初にイベントをバインドしたときにそのクラスがなかったため、イベントはその要素に魔法のようにバインドされません。

on() を使用したイベント委任は 1 つのオプションであり、もう 1 つは単にtoggle();を使用することです。

$("a.abstractShow").on('click', function(){
    var state = $(this).hasClass('active');
    $(this).html(state ? 'Hide' : 'Show')
           .toggleClass('active')
           .next("div.abstract").toggle(state);
});
于 2013-03-04T03:39:33.340 に答える
0

必要なのはこれだけです: LIVE DEMO

$("a.abstractShow").click(function( e ){
    e.preventDefault();
    $(this).text( $(this).text()=='Show'?'Hide':'Show' )
           .next(".abstract").toggle(400);
});
于 2013-03-04T03:38:46.887 に答える