[Solved] Change img src when clicked jquery [duplicate]

by


What I did is to change id="getImg" to class="getImg" because id attribute should always be unique.

Instead of getting the click event of the image, I used the click event of <a>, then located the <img> using find().

I also added an id to the big image, because there are two instance of .img-big, which is an <img> and <div>, and <div> does not have a src attribute.

Lastly, I used e.preventDefault() to prevent the redirection when clicking a <a> tag

$(".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>

1

solved Change img src when clicked jquery [duplicate]