Javascript 使用removeClass将图像src更改回原始图像

我为我的bxSlider做了一个自定义寻呼机。我想在单击时将原始灰色

img

更改为彩色图像，并获得“绿色”类。虽然单击的寻呼机具有类“绿色”和彩色图像，但我希望另一个寻呼机保持原始的灰色图像

我找到了可以将原来的灰色

img

替换为绿色的部分，并删除了同级的“绿色”类，但是，即使从同级中删除了“绿色”类，它仍然保持为彩色

img

，而不是返回到原来的灰色，好像

removeClass（“绿色”）

不起作用

HTML:

---

正如UncaughtTypeError所指出的，一旦你坚持使用绿色类，检查它是否存在是毫无意义的。相反，切换您想要的图像——如果您同时更改成本和物流图像中的图像，那么您只需在每种情况下都设置它们

$（函数（e）{
$（'b-conts1'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（this.addClass（'green'）.sides（）.removeClass（'green'）；
//在这里删除if位——只需设置图像即可
//对于成本和物流，下同。
$（'.b-cost'）.attr（'src'，'/img/benefit-lowcost-c.png'）；
$（'.b-logistic'）.attr（'src'，'/img/benefit-logistic-g.png'）；
});
$（'b-conts2'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（this.addClass（'green'）.sides（）.removeClass（'green'）；
$（'.b-cost'）.attr（'src'，'/img/benefit-lowcost-c.png'）；
$（'.b-logistic'）.attr（'src'，'/img/benefit-logistic-g.png'）；
});
});
ul{
宽度：200px；
}
李{
背景色：#ccc；
}
格林先生{
背景色：#9c9；
}






您可以通过以下方式修改代码：

通过这种方式，您只需修改图像src，这样就无需使用所有图像的src填充js文件，也无需单击
add/remove
.green
class from元素，将desire src设置为image元素，还需要选中
sibles（）
。对于从单击的元素中删除
。绿色
将执行相同的操作，但相反

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);
      }
    });
});

如果（$（this）.hasClass（'green'））
不引用元素的同级-因此该条件将始终计算为
true
，因为在该阶段
$（this）
已经具有类
.green
，并且
else
块中的
.attr（）
方法将永远不会在同级元素上运行（如果它将运行，它将在范围中的元素
$（this）
上运行）。
$(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');    
        };
     });
});

$(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);
      }
    });
});