1 
$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

  $('.box-wrap').bind("click",function(){
        $(this).find('.card').addClass('flipped').bind('click',function(){
          $(this).removeClass('flipped');
        });
    });  
      return false;
});

div を再度クリックすると機能しますが、別の div を 2 回クリックすると、スクリプト全体が機能しません。コンソールにもエラーにも兆候はありません。私はjQueryが初めてで、これを理解できません。

$(this).find('.card').addClass('flipped').mouseleave(function(){

このコードは機能しますが、探しているものではありません。助けてください

4

3 に答える 3

1 
$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

  $('.box-wrap').click(function(){
        $(this).find('.card').addClass('flipped');

        });
    },
      function(){
      $(this).find('.card').removeClass('flipped');
});
于 2013-04-23T05:54:22.250 に答える
1

.toggleClassメソッドが必要です（ここで説明されています）。ボックスを 2 回目にクリックすると、2 つのイベント ハンドラーが表示されます。1 つはflippedクリック時にクラスを追加し、もう 1 つはクラスを削除します。最初に 1 つを実行し、次に別のハンドラーを実行してから、新しいハンドラーを追加して、新しいクリックごとにそれを削除します。

次のように、単一のハンドラーを使用することで、これを大幅に簡素化できます。

$(document).ready(function(){
  $('.box-wrap').bind("click",function(){
        $(this).find('.card').toggleClass('flipped');
  });  
});
于 2013-04-23T05:20:58.660 に答える
1

あなたは簡単に行うことができます：

$(this).find('.card').toggleClass("flipped");

すなわち

$('.box-wrap').bind("click",function(){
   $(this).find('.card').toggleClass("flipped");
});
于 2013-04-23T05:22:09.730 に答える