javascriptでイメージを交換する方法

Question

私はshow/hide機能を実行しようとしていますが、イメージを交換する際に問題があります（ブートストラップクラス）。 show-hide関数が動作していますが、問題は、表示されているクラスを検出する方法がわかりません。コードを使って、クラスをminからplusに変更できます。ユーザーがもう一度ボタンをクリックすると、コンテンツが表示されますが、プラスクラスのままです。

HTM1。

<span class="glyphicon show-hide glyphicon-minus"></span> 

JS。あなたのイベントリスナーに「.glyphiconマイナス」クラスを標的化さためglyphiconプラスクラスは主に残っ

$('.glyphicon-minus').click(function() 
{ 
    $('.show-hide').removeClass('glyphicon-minus').addClass('glyphicon-plus'); 
    $(this).closest('div').next('.widget-content').slideToggle(); 

    var $classto = $('.glyphicon-plus'); 
    $classto.is(':visible') 
    { 
     $('.show-hide').removeClass('glyphicon-plus').addClass('glyphicon-minus'); 
    } 
}) 

Answer 1

理由があります。しかし、クラスグリフコンを変更すると、マイナスは存在しません。要素に残っているクラスに切り替えると、そのトリックが実行されます。

あなたのコードも少しリファクタリングしました。

$('.show-hide').on("click",function() 
{  
    if ($(this).hasClass("glyphicon-minus")){ 
     $(this).removeClass('glyphicon-minus').addClass('glyphicon-plus'); 
    }else{ 
     $(this).removeClass('glyphicon-plus').addClass('glyphicon-minus'); 
    } 
    $(this).closest('div').next('.widget-content').slideToggle(); 

}); 

Answer 2

$('.show-hide').on('click', function(){ 
    var $this = $(this); 
    if($this.hasClass('glyphicon-minus')) { 
    $this 
     .removeClass('glyphicon-minus') 
     .addClass('glyphicon-plus') 
     .closest('div') 
     .next('.widget-content') 
     .slideUp(); 
    } 
    else { 
    $this 
     .removeClass('glyphicon-plus') 
     .addClass('glyphicon-minus') 
     .closest('div') 
     .next('.widget-content') 
     .slideDown(); 
    } 
}); 

それとも、あなたのHTMLが正しく初期化されていると仮定すると：

$('.show-hide').on('click', function(){ 
    $(this) 
     .toggleClass('glyphicon-plus glyphicon-minus') 
     .closest('div') 
     .next('.widget-content') 
     .slideToggle(); 
}); 

（一般的に、あなたは非トグル機能をトグル機能を混在させる必要はありません。）