单击 jquery 时更改 img src

Shidqi 发表于 Dev

士奇

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

卡尔·比纳拉

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

我没有获取图像的点击事件，而是使用了的点击事件<a>，然后找到了<img>using 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。