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

Posted 2023-02-25

【中文标题】HTML5/jQuery：尝试用不同的图像替换列表中的每个图像

【英文标题】：HTML5/jQuery: Trying to replace each image in a list with a different image

【发布时间】：2013-09-08 22:36:38

【问题描述】：

我正在使用 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 中）。

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

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

提前致谢。

喂

【参考方案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');    
    );
);
)();

【讨论】：

嗨，马特，是的，你是绝对正确的。我进行了您建议的更改，还摆脱了无用的 slideImage 变量，而只使用了 listItems 。尽管如此，仍然将每个图像 src 更改为 #4。谢谢！

请使用.on('click', ...) 而不是.click() - 它有助于提醒您这是一个事件处理程序注册，而不是“点击触发器”调用。

【参考方案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。

【讨论】：

这太棒了！我根据您的规范清理了代码，突然循环似乎又开始工作了。我将进行更多测试，然后确定这是否已经解决了它。谢谢！

太棒了！别客气。定义变量时要小心，始终考虑是否真的需要它们，了解作用域和闭包，因为 javascript 在污染全局变量作用域时可能相当敏感，因为一切都发生在客户端。

感谢您的建议，我会采纳的。我刚刚玩过它，现在唯一的问题是 col 似乎返回未定义。

$(this).attr('id'); 而不是 $(this).id;。这里的工作示例：jsfiddle.net/ezUwa

完美运行！非常感谢，我现在就回答这个问题。