CODEWITHSUNDEEP
javascriptjquery
keith lin
keith lin

Reputation: 1

Jquery onclick thumbnails function.

My friend gave me a javascript using Jquery, I don't really understand how it works especially the '.thumbnails > div'. And why the same function is being called in the same line. Can anyone paraphrase the following in english? 

$(function(){
   $(document).on('click', '.thumbnails > div', function(){
    var img = $(this).find('img').attr('src');
    $('.bigImage').attr('src', img);
   });
});

Upvotes: 0

Views: 143

Answers (2)

Dimitar Dimitrov
Dimitar Dimitrov

Reputation: 15148

I'll try to annotate it for you with some comments:

// when the DOM is ready
$(function(){
   // find an element that has a class "thumbnails" - then find all
   // divs that are directly underneath it
   // and attach a click event handler
   $(document).on('click', '.thumbnails > div', function(){
    // when you click -> find an img element under the div that was 
    // clicked on and get its source attribute
    var img = $(this).find('img').attr('src');

    // find an element with a class "bigImage" and change its source
    // attribute to the one selected before
    $('.bigImage').attr('src', img);
   });
});

Upvotes: 1

Chrissx
Chrissx

Reputation: 357

thumbnails > div Selects all elements where the parent is a element. This is a css selector in JQuery. You attach the click event handler for these objects.If you click in these object you find inside the object image attribute source( this is the link for your image ). After that you find big image tag and add this image to the source.

Upvotes: 0

Related Questions