Question

我有4种以上不同类型的图标集，需要每次点击每个链接更改所有图片网址

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

例如：

<div id="selectedIcons">
  <img src="/Images/facebook-square-icon.png" />
  <img src="/Images/twitter-square-icon.png" />
  <img src="/Images/linkedin-square-icon.png" />
  <img src="/Images/youtube-square-icon.png" />
</div>

如果点击 squareIcons 链接，所有图片网址都应如下所示

<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>

如果我点击 grayIcons 链接，所有图片网址都应如下所示

$(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');
  });
});

依此类推......

jQuery :(

keyframe -q -vc Camera0Node.translateX

jsFiddle

Answer 1

试试这个

＆＃13;

$(document).ready(function() {
  $('#iconType a').on('click', function(e){
    e.preventDefault();
    var iconExtension = $(this).attr("data-extension");
    
    $("#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`);
   
    // you can skip the below code. It just shows the 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`);
  });
});

＆＃13;

img{border: solid 1px red !important; margin: 5px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="iconType">
  <li><a href="javascript:;" id="circleIcons" data-extension="circle-icon">Circle icons</a></li>
  <li><a href="javascript:;" id="squareIcons" data-extension="square-icon">Square icons</a></li>
  <li><a href="javascript:;" id="grayIcons" data-extension="gray-icon">Gray icons</a></li>
  <li><a href="javascript:;" id="sketchIcons" data-extension="sketch-icon">Sketch icons</a></li>
</ul>


<div id="selectedIcons">
  <img src="/Images/facebook-circle-icon.png" id="img-facebook"/> <br/>
  <img src="/Images/twitter-circle-icon.png" id="img-twitter"/> <br/>
  <img src="/Images/linkedin-circle-icon.png" id="img-linkedin"/> <br/>
  <img src="/Images/youtube-circle-icon.png" id="img-youtube"/> <br/>
</div>

＆＃13;

Answer 2

.attr('src')是一个吸气剂 .attr('src', 'new string')是设置者

Answer 3

首先您有img的数量，因此您必须循环所有img，并且每次更改一次。

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

您拥有each功能，然后replace src

Answer 4

您获得了src属性并进行了替换，但您没有再次重新分配给img。因此，您必须循环项目并使用更新的src值进行分配。

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

$(document).ready(function() {
	$('#circleIcons').on('click', function(){    
  	$('#selectedIcons img').each(function(){       
       var newsrc = $(this).attr('src').replace('_circle_','_circle_');
       $(this).attr('src',newsrc);
    });
  });
	$('#squareIcons').on('click', function(){
    $('#selectedIcons img').each(function(){       
       var newsrc = $(this).attr('src').replace('_circle_','_square_');
       $(this).attr('src',newsrc);
    });  	
  });
	$('#grayIcons').on('click', function(){
    $('#selectedIcons img').each(function(){       
       var newsrc = $(this).attr('src').replace('_circle_','_gray_');
       $(this).attr('src',newsrc);
    });
  });
	$('#sketchIcons').on('click', function(){
    $('#selectedIcons img').each(function(){       
       var newsrc = $(this).attr('src').replace('_circle_','_sketch_');
       $(this).attr('src',newsrc);
    }); 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="iconType">
  <li><a href="javascript:;" id="circleIcons">Circle icons</a></li>
  <li><a href="javascript:;" id="squareIcons">Square icons</a></li>
  <li><a href="javascript:;" id="grayIcons">Gray icons</a></li>
  <li><a href="javascript:;" id="sketchIcons">Sketch icons</a></li>
</ul>

<div id="selectedIcons">
  <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-256.png" width="32" height="32">
  <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-256.png" width="32" height="32">
  <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-256.png" width="32" height="32">
  <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/youtube_circle_color-256.png" width="32" height="32">
  
</div>

逻辑错误。以上代码段将首次用于click事件，因为在第一次点击后，我们将更改为新的src值，但您的代码始终在寻找旧单词_circle_，而不是更新的单词。所以你必须在逻辑部分思考如何解决这个问题。

<强>更新

根据您的问题更新，您只查看带圆圈的方形更改，反之亦然。以下是该功能的更新代码段。

$(document).ready(function() {
	$('#circleIcons').on('click', function(){    
  	$('#selectedIcons img').each(function(){       
       var newsrc = $(this).attr('src').replace('_square_','_circle_');
       $(this).attr('src',newsrc);
    });
  });
	$('#squareIcons').on('click', function(){
    $('#selectedIcons img').each(function(){       
       var newsrc = $(this).attr('src').replace('_circle_','_square_');
       $(this).attr('src',newsrc);
    });  	
  });
	$('#grayIcons').on('click', function(){
    $('#selectedIcons img').each(function(){       
       var newsrc = $(this).attr('src').replace('_circle_','_gray_');
       $(this).attr('src',newsrc);
    });
  });
	$('#sketchIcons').on('click', function(){
    $('#selectedIcons img').each(function(){       
       var newsrc = $(this).attr('src').replace('_circle_','_sketch_');
       $(this).attr('src',newsrc);
    }); 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="iconType">
  <li><a href="javascript:;" id="circleIcons">Circle icons</a></li>
  <li><a href="javascript:;" id="squareIcons">Square icons</a></li>
  <li><a href="javascript:;" id="grayIcons">Gray icons</a></li>
  <li><a href="javascript:;" id="sketchIcons">Sketch icons</a></li>
</ul>

<div id="selectedIcons">
  <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-256.png" width="32" height="32">
  <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-256.png" width="32" height="32">
  <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-256.png" width="32" height="32">
  <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/youtube_circle_color-256.png" width="32" height="32">
  
</div>

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

4 个答案: