javascript - Jquery onclick 缩略图功能。

Question

我的 friend 给了我一个使用 Jquery 的 javascript，我不太明白它是如何工作的，尤其是“.thumbnails > div”。以及为什么在同一行中调用相同的函数。谁能用英语解释一下下面的内容?

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

Answer 1

我会尝试为您添加一些注释:

// 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);
   });
});