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

Question

我为我的 bxSlider 制作了自定义寻呼机。我想把原来的灰色img变成点击时的彩色图像，得到class"green"。虽然点击的传呼机有 class "green" 和彩色图像，但我希望其他传呼机保持原始灰色图像。

我到达了可以将原来的灰色 img 替换为绿色的部分，并删除了兄弟姐妹的 class "green"，但是，即使 class "green" 从兄弟姐妹中移除，它仍然保持彩色 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 指出的那样，一旦您将绿色 class 贴上，检查它是否存在就没有意义了。相反，切换您想要的图像——如果您同时更改成本图像和物流图像中的图像，那么您只需在每种情况下都设置它们。

$(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

您可以这样修改您的代码：
通过这种方式，您只需修改图像 src(s)，因此无需使用所有图像的 src(s) 填充 js 文件，也无需从元素中单击 add/remove .green class 和将 desire 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

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

Changing image src back to the original image using removeClass

html

javascript

css

jquery

bxslider