瞭解JavaScript/jQuery代碼片段

Question

我遇到下面的代碼，並想知道IMG.active也提到了什麼。如果有人可以幫忙，你可以一行一行地寫評論嗎？

function slideSwitch() { 
    //what does this and the next line do? 
    var $active = $('#slideshow IMG.active'); 
    if ($active.length == 0) $active = $('#slideshow IMG:last'); 

    //what is going on here? 
    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    // uncomment the 3 lines below to pull the images in random order 

    // var $sibs = $active.siblings(); 
    // var rndNum = Math.floor(Math.random() * $sibs.length); 
    // var $next = $($sibs[ rndNum ]); 


    //can someone elaborate on these lines? 
    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 

我認爲這段代碼試圖從每張圖片下拉出圖片？

Answer 1

IMG.active指具有active類的所有圖像標籤（<img />），所以：

<img src="..." class="active" /> 

-

function slideSwitch() { 
    var $active = $('#slideshow IMG.active');//get all `img` elements with the `active` class within the #slideshow element 
    if ($active.length == 0) $active = $('#slideshow IMG:last');//if no elements were selected on the last line, then set the active slide (`$active`) to the last image in the slideshow 

    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first');//check to see if there is another image after the current $active element, if not then set the $next variable to the first image in the slideshow 

    // uncomment the 3 lines below to pull the images in random order 

    // var $sibs = $active.siblings(); 
    // var rndNum = Math.floor(Math.random() * $sibs.length); 
    // var $next = $($sibs[ rndNum ]); 


    $active.addClass('last-active');//add the `last-active` class to the current $active element 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     });//these lines set the $next element to invisible, adds the `active` class, then animates its opacity to show the image, after the animation is complete it removes the `active` and `last-active` classes from the $next element. 
} 

//this runs the function above on an interval of 5sec when the `document.ready` event fires 
$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 

Answer 2

//what is going on here? 
var $next = $active.next().length ? $active.next() 
    : $('#slideshow IMG:first'); 

這是一個三元運算符。基本上，如果next()函數返回0以外的任何值，則下一個圖像將被指定爲next()返回的值。否則，它將使用#slideshow元素中的第一個img元素。

//can someone elaborate on these lines? 
$active.addClass('last-active'); 

這增加了類的last-active取其元素目前有一類active。

Answer 3

評論添加到下面。注意：$active.next()也選擇非圖像元素。這可能不是有意的。如果您想要選擇下一個圖像元素，請改用$active.nextAll("img:first")。

function slideSwitch() { 
    // Selects all <img class="active"> elements which are a child of 
    // an element with id="slideshow" 
    var $active = $('#slideshow IMG.active'); 

    // If the collection $active contains no elements, select the last 
    // <img> element which is a child of <.. id=slideshow> 
    if ($active.length == 0) $active = $('#slideshow IMG:last'); 

    // If there's another element after <img>, select it. Otherwise, select 
    // first <img> 
    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    // Add `class=last-active` to the selected element. 
    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) // Set opacity 0 
     .addClass('active')  // Set class `active` 
     .animate({opacity: 1.0}, 1000, function() { //Animate 
      $active.removeClass('active last-active'); 
     }); 
} 

// Create an interval when the document is ready 
$(function() { 
    setInterval("slideSwitch()", 5000); 
});