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以指向新图像，从而改变滑块的内容。

E.g。 /img/green1.png会变成/img/blue1.png而green2.png会变成blue2.png等。

事实上，这种方法似乎并不一致。我似乎无法确定错误但控制台经常告诉我它只为每个实例加载图像4。（即单击按钮后，将向每个li中插入blue4.png）。

如果有人能帮助我，那将是可爱的！

我愿意接受更好的方法。正如我所说，我是新人，所以不确定做这种操作的最佳方法是什么。我希望这个功能能够缩放，所以我可以有多个不同的按钮，即蓝色，红色，橙色等。

提前致谢。

Sirrah

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。

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

2 个答案: