Question

我的朋友使用Jquery给了我一个javascript，我真的不明白它是如何工作的，尤其是'.thumbnails＆gt; 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);
   });
});

Answer 2

缩略图＆gt; div选择父元素为元素的所有元素。这是JQuery中的css选择器。您附加了这些对象的单击事件处理程序。如果单击这些对象，则可以在对象图像属性源中找到（这是图像的链接）。之后，您会找到大图像标记并将此图像添加到源。

Jquery onclick缩略图功能。

2 个答案: