Question

我为 bxSlider 制作了自定义寻呼机。我想在单击时将原始灰色img更改为彩色图像，然后获得类＆＃34;绿色＆＃34;。点击的寻呼机有类＆＃34;绿色＆＃34;和彩色图像，我希望其他寻呼机保持原始的灰色图像。

我到了可以将原始灰色img替换为绿色的部分，并删除了类＆＃34;绿色＆＃34;然而，兄弟姐妹，即使班级＆＃34;绿色＆＃34;从兄弟姐妹中移除，它仍然保持为彩色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指示时，一旦你坚持使用绿色类，检查它是否在那里是没有意义的。相反，切换您想要的图像 - 如果您在成本和逻辑图像中更改图像，那么您只需在每种情况下都设置它们。

$(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类并将欲望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更改回原始图像

2 个答案: