时间戳

首页 > 解决方案 > 单击某个图像后，如何更改另一个元素中的 img src 值

jquery - 单击某个图像后，如何更改另一个元素中的 img src 值

问题描述

单击 html 元素时，我希望正确显示该元素的数据属性，在本例中为图像。在这种情况下，我希望当单击 ken 时，他的 data-fighter 属性中的图像会替换 div.portrait 中的当前图像，即 ryup.png。

var name = $("#name");
var nation = $("#nation");
var style = $("#style");
var fighter = $("div.portrait img");



$("[data-name], [data-nation], [data-style], [data-     
fighter]").click(function(){
name.html($(this).data().name);
nation.html($(this).data().nation);
style.html($(this).data().style);
// something needs to go here
}); 


<div class="portrait">
<img src="images/ryup.png" alt="Ryu" title="Ryu">
</div>

<img src="images/kens.png" alt="Ken" title="Ken" data-name=" Ken Masters"
data-nation=" American" 
data-style=" Ansatsuken" 
data-fighter="images/kenp.png">

标签： jqueryhtml

解决方案

工作小提琴。

然后你应该替换src属性，如：

fighter.prop('src', $(this).data('fighter'));


$("[data-name], [data-nation], [data-style], [data-fighter]").click(function() {
  var name = $("#name");
  var nation = $("#nation");
  var style = $("#style");
  var fighter = $("div.portrait img");

  name.html($(this).data().name);
  nation.html($(this).data().nation);
  style.html($(this).data().style);
  fighter.prop('src', $(this).data('fighter'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portrait">
  <img src="https://www.ssbwiki.com/images/thumb/3/32/Link_SSB4.png/100px-Link_SSB4.png" alt="Ryu" title="Ryu">
</div>

<img src="https://www.ssbwiki.com/images/thumb/6/63/Ryu_SSB4.png/100px-Ryu_SSB4.png" alt="Ken" title="Ken" data-name=" Ken Masters" data-nation=" American" data-style=" Ansatsuken" data-fighter="https://www.ssbwiki.com/images/thumb/6/63/Ryu_SSB4.png/100px-Ryu_SSB4.png">

推荐阅读