なぜこのjQueryコードは1つの反復に対してのみ機能しますか？

Question

基本的には、ドロップアイコンがあります。ドロップアイコンは、その下の領域を展開してコラプスする必要があります。バックグラウンドの位置とポイントを下に変え、いくつかのコンテンツを表示します。もう一度クリックすると、コンテンツが折りたたまれ、バックグラウンドの位置が変更されます。以下は私が書いたものですが、正しく動作しません。

$(function() { 
    $(".aclass").live('click' , function() { 
     $(this).css("background-position","-156px -42px").addClass("new"); 

     $(".blockedDiv").hide(); 
     $(".mystery").css("max-height","189px"); 
    }); 

    $(".new").live('click', function() { 
     $(this).css("background-position","0px 0px"); 
     $(".blockedDiv").show(); 
     $(".mystery").css("max-height","1007px"); 
    }); 
}); 

私の二つの質問： 1：なぜ、これが唯一の反復 2のために働いている。これを達成するためのより良い方法があります。

Answer 1

あなたが追加したnewクラスを削除していません。そのため、再度クリックすると、2番目のイベントハンドラも起動され、最初のイベントハンドラの処理が逆になります。

サイドノートスラッシュヒントとして、明示的なCSSルールを指定することができます。これはjQueryで切り替えることができるため、複雑なロジックを（比較的）複雑にする必要はありません。

.mystery { max-height:10007px; } 
.mystery.flagged { max-height:189px; } 

.aclass { background-position:0 0; } 
.aclass.flagged { background-position:-156px -42px; } 

あなたのjQueryで、その後

：

ここ

$('.aclass').live('click', function() { 
    $('.mystery').toggleClass('flagged'); 
    $(this).toggleClass('flagged'); 
    $('.blockedDiv').toggle(); 
}); 

Answer 2

作業をする必要があり、それを行うためのわずかに異なる方法です。

$(function() { 
    $(".aclass").live('click' , function() { 
     var $this = $(this), // cache the result of the function to prevent recreating it each time 
      is_expanded = $this.hasClass('new'); 
     $this.css({'background-position': (is_expanded ? '-156px -42px' : '0px 0px')}); 
     $('.mystery').css({'max-height': (is_expanded ? '189px' : '1007px')}); 
     if (is_expanded) { 
      $('.blockedDiv').show(); 
      $this.removeClass('new'); 
     } else { 
      $('.blockedDiv').hide(); 
     } 
     $this.addClass('new'); // won't do anything if it already has the class 
    }); 
}); 

EDIT：@RichardニールIlaganが述べたように、あなた（と私は）newクラスを削除するのを忘れました。

Answer 3

うまくいきました。 jsFiddle

をクリックして「.aclass」と、それは以下となります。 1）は、 『この』 2））ことになりましたBOTHハンドラの標的となっている（ 『新しい』クラスを追加 3の背景位置を設定します） 4）は「.new」.mystery

をクリックしての最大の高さを設定し.blockedDiv異なる事を隠し、それは以下となります。 1） 『は、この』 2）を示しての背景位置を設定します別のもの.blockedDiv 3）ミステリーの最大高さを設定する

あなたは何をするつもりでしたか？おそらく、クラス.aclass intを最初のハンドラから削除し、2番目のハンドラで逆を行いたい（.aclass remove .new）？

Answer 4

リチャードはすでにあなたのコードですでに問題を指摘しています。 newクラスを切り替える必要があります。

もっとクリーンな方法はおそらくtoggleClass()のjQuery関数を使用することです。

.hiddenDiv {...} 
.expandedIcon {...} 
.collapsedIcon {...} 

そして、JS：

次の2つのCSSクラスを定義しますが、反復を何を意味する

<div class="aClass collapsedIcon"> </div> <!-- initially collapsed --> 
<div class="blockDiv hiddenDiv"> </div> <!-- initially hidden -->