jQuery onClick图标类型-更改所有图像URL

我有4+种不同类型的图标集，每次点击每个链接时都需要更改所有图标的图像url

要根据相关链接更改图像src（部分）

例如：

.attr（'src'）

是一个getter

---

.attr（'src'，'new string'）

是设置者

首先您有

img的数量

，因此您必须循环所有

img

的，并每次更改一个

$('#circleIcons').on('click', function(){
$('#selectedIcons img').each(function() {
   $(this).attr('src',$(this).attr('src').replace("old/directory", "new/directory"));
});

---

您拥有

每个
功能，然后
替换
src
您将获得
src
属性并进行替换，但您不会再次重新分配给
img
。因此，您必须循环项目并使用更新的
src
值进行分配

 $('#squareIcons').on('click', function(){
   $('#selectedIcons img').each(function(){       
     var newsrc = $(this).attr('src').replace('_circle_','_square_');
     $(this).attr('src',newsrc);
  });
});


$（文档）.ready（函数（）{
$（'#circleIcons'）。在（'click'，function（）{
$（'#selectedIcons img'）。每个（函数（）{
var newsrc=$（this）.attr（'src'）.replace（'u circle'，'u circle'）；
$（this.attr（'src'，newsrc）；
});
});
$（'#squareIcons'）。在（'单击'，函数（）上）{
$（'#selectedIcons img'）。每个（函数（）{
var newsrc=$（this）.attr（'src'）.replace（'u circle'，'u square'）；
$（this.attr（'src'，newsrc）；
});  	
});
$（“#灰色图标”）。在（'click'，function（）上{
$（'#selectedIcons img'）。每个（函数（）{
var newsrc=$（this）.attr（'src'）.replace（'u circle'，'u gray'）；
$（this.attr（'src'，newsrc）；
});
});
$（'#sketchIcons'）。在（'单击'，函数（）上）{
$（'#selectedIcons img'）。每个（函数（）{
var newsrc=$（this）.attr（'src'）.replace（'u circle'，'u sketch'）；
$（this.attr（'src'，newsrc）；
}); 
});
});







试试这个
$（文档）.ready（函数（）{
$（'#i键入a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var iconExtension=$（this.attr（“数据扩展”）；
$（“#img facebook”）.attr（'src'，`/Images/facebook-${iconExtension}.png`）；
$（“#img twitter”）.attr（'src'，`/Images/twitter-${iconExtension}.png`）；
$（“#img linkedin”）.attr（'src'，`/Images/linkedin-${iconExtension}.png`）；
$（“#img youtube”）.attr（'src'，`/Images/youtube-${iconExtension}.png`）；
//您可以跳过下面的代码。它只显示src url
$（“#img facebook”）.attr（'alt'，`/Images/facebook-${iconExtension}.png`）；
$（“#img twitter”）.attr（'alt'，`/Images/twitter-${iconExtension}.png`）；
$（“#img linkedin”）.attr（'alt'，`/Images/linkedin-${iconExtension}.png`）；
$（“#img youtube”）.attr（'alt'，`/Images/youtube-${iconExtension}.png`）；
});
});
img{边框：实心1px红色！重要；边距：5px}















facebook-square-icon.png在哪里？你太棒了。。。投票并接受了你的答案。。。谢谢这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论。-@罗布：这就是问题的答案。我只是指出了代码中的错误并提供了解决方案，它是如何应用的，这是另一个问题。
<div id="selectedIcons">
  <img src="/Images/facebook-my-gray-icon.png" />
  <img src="/Images/twitter-my-gray-icon.png" />
  <img src="/Images/linkedin-my-gray-icon.png" />
  <img src="/Images/youtube-my-gray-icon.png" />
</div>

$(document).ready(function() {
  $('#circleIcons').on('click', function(){
    $('#selectedIcons img').attr('src').replace('square','circle');
  });

  $('#squareIcons').on('click', function(){
    $('#selectedIcons img').attr('src').replace('circle','square');
  });
});

$('#circleIcons').on('click', function(){
$('#selectedIcons img').each(function() {
   $(this).attr('src',$(this).attr('src').replace("old/directory", "new/directory"));
});

 $('#squareIcons').on('click', function(){
   $('#selectedIcons img').each(function(){       
     var newsrc = $(this).attr('src').replace('_circle_','_square_');
     $(this).attr('src',newsrc);
  });
});