2xクラスを使用してjQueryで3番目を選択して切り替えます

Question

次の2つのクラスを使用して選択しているボタンのクラスを選択して切り替えるjQueryがあります。なぜセレクターはクラスを変更せずに不平を言うのですか？私にはfiddle hereがあります。

$(document).on('click', 'button.ajax-multi-btn', function(event) { 
    if ($(this).hasClass('ly')) { 
    $('button.ajax-multi-btn.ty').removeClass('secondary-menu-active'); 
    $('button.ajax-multi-btn.ly').addClass('secondary-menu-active'); 
    } else { 
    $('button.ajax-multi-btn.ty').addClass('secondary-menu-active'); 
    $('button.ajax-multi-btn.ly').removeClass('secondary-menu-active'); 
    } 

}); 

私は次のようなHTMLがあります。

<button type="button" class="btn ajax-multi-btn ty secondary-menu-active">TY</button> 

<button type="button" class="btn ajax-multi-btn ly">LY</button> 

Answer 1

を私はあなたがちょうどあなたが削除に使用していたクラス上の誤りがあり、クラスの機能を追加し、仕事にフィドルにスクリプトを変更しました。あなたのFIDDLEで

$(document).on('click', 'button.ajax-single-btn', function(event) { 
 
    if (!$(this).hasClass('ly')) { 
 
    $('button.ajax-single-btn.ty').removeClass('secondary-menu-active'); 
 
    $('button.ajax-single-btn.ly').addClass('secondary-menu-active');  
 
    alert('ly'); 
 
    } else { 
 
    $('button.ajax-single-btn.ty').addClass('secondary-menu-active'); 
 
    $('button.ajax-single-btn.ly').removeClass('secondary-menu-active'); 
 
    alert('ty'); 
 
\t } 
 
});

.secondary-menu-active { 
 
    color: red; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 

 
<button type="button" class="btn ajax-single-btn ty secondary-menu-active"> 
 
    TY 
 
</button> 
 

 
<button type="button" class="btn ajax-single-btn ly"> 
 
    LY 
 
</button>

Answer 2

HTMLマークアップは、クラスajax-multi-btnとボタンを持っていないので、それが存在しないボタンを選択したため、スクリプト内のものは動作しません。適切なクラスを使用するようにスクリプトを更新してみませんか？

はデモを参照してください。

$(document).on('click', 'button.ajax-single-btn', function(event) { 
 

 

 
    if (!$(this).hasClass('ly')) { 
 

 
    $('button.ajax-single-btn.ty').removeClass('secondary-menu-active'); 
 
    $('button.ajax-single-btn.ly').addClass('secondary-menu-active'); 
 
    
 
    alert('ly'); 
 

 
    } else { 
 

 
    $('button.ajax-single-btn.ty').addClass('secondary-menu-active'); 
 
    $('button.ajax-single-btn.ly').removeClass('secondary-menu-active'); 
 

 
    alert('ty'); 
 

 
} 
 

 
});

.secondary-menu-active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn ajax-single-btn ty secondary-menu-active"> 
 
    TY 
 
</button> 
 

 
<button type="button" class="btn ajax-single-btn ly"> 
 
    LY 
 
</button>