Dan Dan - 5 months ago 27
Javascript Question

Replace div contents using jQuery

I'm looking for a way to replace the image in the featured-image class with the image one clicks in the thumbnail class. I want to implement this using jquery ... I have been trying to use the $(selector).replaceWith() function but that doesnt work as expected. Below is my markup

<div class = "image-slider">
<div id = "featured-image">
<img src = "truck.jpg">
</div>
<ul class = "thumbnail">
<li><img class = "small-image" src = "images/1.jpg" ></li>
<li><img class = "small-image" src = "images/2.jpg" ></li>
<li><img class = "small-image" src = "images/3.jpg" ></li>
<li><img class = "small-image" src = "images/4.jpg" ></li>
<li><img class = "small-image" src = "images/5.jpg" ></li>
</ul>
</div>


Anyone with a solution that works without removing the clicked item from the unordered list? The solution should also allow one to switch the image multiple times. Thank you.

bdc bdc
Answer
$('.thumbnail img').on('click', function(e) {
    var _el = $(e.currentTarget);
    $('#featured-image img').attr('src', _el.attr('src'));
});