HTML5/jQuery：尝试用不同的图像替换列表中的每个图像

Question

我正在使用 bxslider。我正在尝试编写一些 jQuery，以便在单击按钮后将滑块中的每个图像替换为不同的图像。

HTML：

<!--Slider list-->
<ul class="bxslider">
    <li><img  src="/img/green1.png" /></li>
    <li><img  src="/img/green2.png" /></li>
    <li><img  src="/img/green3.png" /></li>
    <li><img  src="/img/green4.png" /></li>
</ul>

<!--Button(s)-->
<ul class="colour">
    <li id="blue">Blue</li>
</ul>

jQuery:

(function() {
  // Variables                
  var colourLis= $(".colour").children(),
      listItems = $(".bxslider li img"),
      imgSrc = [ 1, 2, 3, 4, ];

  // Click button
 colourLis.click(function() {
      clickedID = $(this).id;
      listItems.each(function(index) {
          listItems.attr('src', '/img/' + clickedID + imgSrc[index] + '.png');

    });
  });
})();

我知道这看起来和听起来令人困惑，而且我的代码可能非常混乱 - 我对此很陌生！任何一般性建议将不胜感激。

无论如何，上面的 jQuery 的意思是，在单击“蓝色”时，滑块中的四个图像中的每一个都会将其 src 更改为指向新图像，从而更改滑块的内容。

例如/img/green1.png 会变成 /img/blue1.png 和 green2.png 会变成 blue2.png 等等。

问题是，这种方法似乎无法始终如一地工作。我似乎无法确定出了什么问题，但控制台经常告诉我它只为每个实例加载图像 4。 （即点击按钮后，blue4.png 将被插入到每个 li 中）。

如果有人可以帮助我，那就太好了！

我愿意接受更好的方法来做到这一点。正如我所说，我是新手，所以不确定进行这种操作的最佳方法是什么。我希望这个函数能够缩放，这样我就可以有多个不同的按钮，即蓝色、红色、橙色等。

提前致谢。

喂

Answer 1

由于 colourLis 可以包含多个项目，因此您无法像现在这样可靠地使用 id 属性，因此您需要专门获取您单击的项目的 id。您还可以单击，并且每个函数都嵌套了错误的方式。

(function() {

//Variables                
var colourLis= $(".colour").children(),
    slideImage = $(".slideimage"),
    listItems = $(".bxslider li img"),
    imgSrc = [ 1, 2, 3, 4, ];

//Click button
colourLis.click(function() {
    // Get the ID of the item clicked
    clickedID = $(this).id;
    // For each image in list
    listItems.each(function(index) {
        slideImage.attr('src', '/img/' + clickedID + imgSrc[index] + '.png');    
    });
});
})();

Answer 2

以下是我处理该代码的方式。我会删除所有不必要的变量（除非您打算稍后更改它们，在这种情况下您绝对应该坚持使用变量），并重新组织嵌套结构：

var imgSrc = [ 1, 2, 3, 4 ];

$('.colour li').on('click', function() {
    var col = $(this).attr('id');
    $('.bxslider li img').each(function(i) {
        $(this).attr('src', '/img/' + col + imgSrc[i] + '.png');
    });
});

如果你愿意，你甚至可以去掉imgSrc。