单击jquery时更改img src

Question

我有一些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图像，但我的代码无法正常工作。

Answer 1

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

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

我还在大图片中添加了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>

Answer 2

您无需提供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>