removeClassを使用してイメージsrcを元のイメージに戻す

Question

bxSliderのカスタムページャを作成しました。私はクリックされたときにオリジナルの灰色imgをカラー画像に変更し、クラス「緑」を取得したいと思います。クリックされたページャは、クラス「緑色」およびカラー画像を有する一方で、他のページャを元のグレー画像として維持したい。

元の灰色のimgを緑に置き換え、兄弟の「緑」クラスを削除することができましたが、「緑」クラスが兄弟から削除されても、 imgの色は、元の灰色に戻るのではなく、removeClass("green")が機能していない場合と同じです。

HTML：

<ul id="slidePager"> 
    <li class="col-md-2 b-conts1"> 
     <a href="#" data-slide-index="0"> 
      <img src="img/benefit-lowcost-g.png" class="b-cost" alt="low cost icon" > 
     </a> 
    </li> 
    <li class="col-md-2 b-conts2"> 
     <a href="#" data-slide-index="1"> 
      <img src="img/benefit-logistic-g.png" class="b-logistic" alt="logistics icon" > 
     </a> 
    </li> 
</ul> 

のjQuery：

$(function(e){ 
    $('.b-conts1').on('click', function(e){ 
     e.preventDefault(); 

     $(this).addClass('green').siblings().removeClass('green'); 

     if($(this).hasClass('green')){ 
      $('.b-cost').attr('src','/img/benefit-lowcost-c.png'); 
     } else { 
      $('.b-cost').attr('src','/img/benefit-lowcost-g.png');  
     }; 
    }); 

    $('.b-conts2').on('click', function(e){ 
     e.preventDefault(); 

     $(this).addClass('green').siblings().removeClass('green'); 

     if($(this).hasClass('green')){ 
      $('.b-logistic').attr('src','/img/benefit-logistic-c.png'); 
     } else { 
      $('.b-logistic').attr('src','/img/benefit-logistic-g.png');  
     }; 
    }); 
}); 

Answer 1

UncaughtTypeErrorが示されているように、あなたが上の緑色のクラスを貼りたら、それはそれはありますかどうかを確認することは無意味です。代わりに、必要な画像を切り替えます。費用とロジスティック画像の両方で画像を変更している場合は、それぞれの場合に両方の画像を設定するだけです。あなたは、単に画像SRC（複数可）を修正する。このように
をので（すべての画像のsrcを使ってJSファイルを移入する必要はありません。

$(function(e) { 
 
    $('.b-conts1').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    $(this).addClass('green').siblings().removeClass('green'); 
 

 
    // Remove the if bit here -- instead, simply set the images 
 
    // for BOTH cost and logistic. Same below. 
 
    $('.b-cost').attr('src', '/img/benefit-lowcost-c.png'); 
 
    $('.b-logistic').attr('src', '/img/benefit-logistic-g.png'); 
 
    }); 
 

 
    $('.b-conts2').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    $(this).addClass('green').siblings().removeClass('green'); 
 
    $('.b-cost').attr('src', '/img/benefit-lowcost-c.png'); 
 
    $('.b-logistic').attr('src', '/img/benefit-logistic-g.png'); 
 
    }); 
 
});

ul { 
 
    width: 200px; 
 
} 
 
li { 
 
    background-color: #ccc; 
 
} 
 
.green { 
 
    background-color: #9c9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="slidePager"> 
 
    <li class="col-md-2 b-conts1"> 
 
    <a href="#" data-slide-index="0"> 
 
     <img src="img/benefit-lowcost-g.png" class="b-cost" alt="low cost icon"> 
 
    </a> 
 
    </li> 
 
    <li class="col-md-2 b-conts2"> 
 
    <a href="#" data-slide-index="1"> 
 
     <img src="img/benefit-logistic-g.png" class="b-logistic" alt="logistics icon"> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 2

あなたは、このようにコードを変更することができますまた、add/remove.greenクラスからクリックして画像要素に希望のsrcを設定し、siblings()もチェックしてください。クリックされた要素から.greenを削除すると同じですが逆になります。

jQueryのは：

$(function(e){ 
    $("li[class*='b-conts']").on('click', function(e){//[class^="b-conts"] 
     e.preventDefault(); 
     if($(this).hasClass('green')){ 
     $(this).removeClass('green'); 
     var source = $(this).find('img').attr('src'); 
      source = source.slice(0,-5) + 'g.png'; 
      $(this).find('img').attr('src', source); 
     } else { 
     $(this).addClass('green'); 
     $(this).siblings().each(function(){ 
     if($(this).hasClass('green')){ 
      $(this).removeClass('green'); 
      var source = $(this).find('img').attr('src'); 
       source = source.slice(0,-5) + 'g.png'; 
       $(this).find('img').attr('src', source); 
     } 
     }); 
     var source = $(this).find('img').attr('src'); 
      source = source.slice(0,-5) + 'c.png'; 
      $(this).find('img').attr('src', source); 
     } 
    }); 
}); 

jsfiddle