クリックすると.attr（）ループがどのようにループするのですか？

Question

私はしばらくの間立ち往生していました..

私は3つのボタンを持つシステムを設定しようとしています、それぞれのボタンは3つのdivのうちの1つを表示します。チェックがあり、現在開いているウィンドウの対応するボタンがそのクラスを変更して背景色を変更するので、どのオプションが開いているかを簡単に確認できます。

はその後、別のボタンの負荷異なるコンテンツをクリックするが、開いているウィンドウを保持します - これは二度同じボタンをクリックする

を働くウィンドウを閉じ、これはこれは繰り返すことができるはずです

働くクラス - 再ボタンを設定し、 - しかし、それはありません..

対応するウィンドウを読み込み、そのボタンのクラスを変更することができます。そのウィンドウを閉じてクラスを元の状態にリセットしますが、同じウィンドウを再び開こうとすると、クラスは再び変更されません。それはあなたがそれを再自己を開始し、その同じポイントまで動作します。その場合には別のウィンドウを開いて再しない限り、スーパー混乱して... ..

を

を、このプロセスを繰り返すことはしませんし、ここで起こっていただきました！参照カント..

何か助けてください！

$(document).ready(function(){ 
    $('#findUs').click(function(){ 

     if($('.findUs').length){ //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button----- 
        $('#findUs').attr('class','contactTitle'); 
       $('.infoDropdown').slideToggle("slow"); 
       return false; 
     } 
        $('#findUs').attr('class','selectedContact'); 
        $('#phoneUs').attr('class','contactTitle'); 
        $('#faxUs').attr('class','contactTitle'); 


     $('.infoDropdown').load('global/contactOptions.php .findUs',{},function(){ 

      if($('.infoDropdown').is(':hidden')){ 
        $('.infoDropdown').slideToggle("slow"); 
       } 

       }); 

      }); 


//------------------------------------phone------------------------------------------ 
    $('#phoneUs').click(function(){ 

      if($('.phoneUs').length){ //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button----- 
        $('#phoneUs').attr('class','contactTitle'); 
       $('.infoDropdown').slideToggle('slow'); 
       return false; 
     } 
        $('#phoneUs').attr('class','selectedContact'); 
        $('#findUs').attr('class','contactTitle'); 
        $('#faxUs').attr('class','contactTitle'); 

      $('.infoDropdown').load('global/contactOptions.php .phoneUs',{},function(){ 

       if($('.infoDropdown').is(':hidden')){ 
        $('.infoDropdown').slideToggle("slow"); 

       } 
       }); 
     }); 
//------------------------------------Fax-------------------------------------------- 
    $('#faxUs').click(function(){ 

      if($('.faxUs').length){ //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button----- 
        $('#faxUs').attr('class','contactTitle'); 
       $('.infoDropdown').slideToggle("slow"); 
       return false; 
     } 
        $('#faxUs').attr('class','selectedContact'); 
        $('#findUs').attr('class','contactTitle'); 
        $('#phoneUs').attr('class','contactTitle'); 

      $('.infoDropdown').load('global/contactOptions.php .faxUs',{},function(){ 

       if($('.infoDropdown').is(":hidden")){ 
        $('.infoDropdown').slideToggle("slow"); 

       } 
     }); 
    }); 

}); 

===========================メインのHTML ============= ========================

<div align="center" > 
      <span class="contactTitle" id="findUs">Find Us:</span> 
      <span class="contactTitle" id="phoneUs">Phone Us:</span> 
      <span class="contactTitle" id="faxUs">Fax Us:</span> 
     </div> 

     <div class="infoDropdown"> 
     </div> 

=================== =======セーブページからロードされたdiv =============================

<div class="findUs" name="findUs"> 
dfgdfg 
     </div> 

     <div class="phoneUs" name="phoneUs"> 
     test 
     </div> 


     <div class="faxUs" name="faxUs"> 
     123 
     </div> 

= ==================== CSS ============= ===========================

<style> 
.infoDropdown{ 
    display:none; 
    height:250px; 
    margin-top:5px; 
    background-color:rgba(33,252,0,1.00); 
    margin-left: 5px; 
    margin-right: 5px; 
    border-radius: 5px; 
} 
.contactTitle{ 
    width:33%; 
    font-weight:bold; 
    text-align:center; 
    border-radius:5px; 
    display:inline-block; 
    font-size:30px; 
    background-color:green; 
    margin-top:5px; 
    align-items:center; 

} 
.selectedContact{ 
    width:33%; 
    font-weight:bold; 
    text-align:center; 
    border-radius:5px; 
    display:inline-block; 
    font-size:30px; 
    background-color:rgba(33,252,0,1.00); 
    margin-top:5px; 
    align-items:center; 
} 
</style> 

Answer 1

コンテンツをajaxで一度ロードした後、このチェックは常にtrueになります。if($('.findUs').length)これにより、ボタンのクラスを変更するコードの部分に到達する前にfalseが返されます。