单击jquery时更改img src [重复]答案

【问题标题】：Change img src when clicked jquery [duplicate]单击jquery时更改img src [重复]
【发布时间】：2018-02-26 13:53:52
【问题描述】：

我有一些 HTML 代码：

<div class="text-center img-big">
  <!-- IMAGE BIG  -->
  <img class="img-fluid img-big" src="" alt="">
</div>

<!-- IMAGE SMALL  -->
<a id="getImg" href="" ><img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>

<a id="getImg" href="" ><img src="img/asus-thumb.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>

<img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100">

这是我的一些 jquery 代码：

<script type="text/javascript">
  var imgSrc = $(".thumb-first").attr("src");
  $(".img-big").attr("src",imgSrc);

  $("#getImg img").on("click",function(){
    tes = $(this).attr("src");
    $(".img-big").attr("src",imgSrc);
  });
</script>

我想在点击小图片时将 src 图片更改为大，但我的代码无法正常工作。

【问题讨论】：

您是否在控制台中看到任何错误..？顺便说一句，img-big 类有 2 个元素，所以 $(".img-big") 可能不会返回你想要的那个。尝试像 $("img.img-big") 那样明确以获取 img 类 img-big 的元素
究竟是什么不工作？
您使用了两次getImg id...这是无效的...而且不清楚您在做什么...您已经为asus 使用了三个小图像...为什么？？？...最好编辑您的问题
你想让小图的来源点击后“转”成大图吗？
控制台没有错误，当我点击小img时，图片大的src发生了变化，但又像以前一样恢复

标签： javascript jquery html css

【解决方案1】：

我所做的是将id="getImg" 更改为class="getImg"，因为id 属性应该始终是唯一的。

我没有获取图片的点击事件，而是使用<a>的点击事件，然后使用find()定位<img>。

我还在大图中添加了id，因为.img-big有两个实例，分别是<img>和<div>，而<div>没有src属性。

最后，我使用e.preventDefault() 来防止点击<a> 标签时的重定向

$(".getImg").click(function(e) {
  var imgSrc = $(this).find("img").attr("src");
  $("#bigImage").attr("src", imgSrc);
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
  <!-- IMAGE BIG  -->
  <img id="bigImage" class="img-fluid img-big" src="" alt="">
</div>

<!-- IMAGE SMALL  -->
<a class="getImg" href=""><img src="http://via.placeholder.com/100x100" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>

<a class="getImg" href=""><img src="http://via.placeholder.com/200x200" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>

【讨论】：

成功了，谢谢兄弟

【解决方案2】：

首先，您有多个具有相同id 属性的元素。

第二，这里没有定义tes变量。

tes = $(this).attr("src");

第三，试着把你的javascript放在html页面的底部或者把你的javascript代码放在ready函数里面：

$(document).ready(function(){

});

【讨论】：

【解决方案3】：

你不需要给getImg，可以通过onclick函数来完成。试试我的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
  <!-- IMAGE BIG  -->
  <img class="img-fluid img-big" src="" alt="">
</div>

<!-- IMAGE SMALL  -->
<a href="javascript:;" ><img onclick="change_img(this)" src="Egg.png" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>

<a href="javascript:;" ><img onclick="change_img(this)" src="Fish.png" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>
 


<script>
    function change_img(param){
        var src = $(param).prop('src');
        $('.img-big').prop('src',src);
    }
</script>

【讨论】：