在jquery gallery中獲取undefined錯誤

Question

我仍然是一個初學者，所以忍受着我。我正試圖用jquery編寫一個圖像庫。我收到一個未定義的錯誤： 幻燈片[slideIndex-1] .style.display =「block」;

這裏是我的js代碼：

$(function(){ 
    var slideIndex = 1; 
$('.demo').on("click", function(e) { 
     e.preventDefault(); 
     var o = $(this).attr("data-slide"); 
     showSlides(slideIndex = o); 
     console.log(o); 
    }); 

$('.arrow').on('click', function (e){ 
    e.preventDefault(); 
    var g = $(this).attr('data-move'); 
     showSlides(slideIndex += g); 
    }); 

    function plusSlides(n) { 
    showSlides(slideIndex += n); 
    } 
    showSlides(slideIndex); 

    function showSlides(n) { 
    var i; 
    var slides = $(".mySlides"); 
    var dots = $(".demo"); 
    var captionText = $("#caption"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    console.log(slides[slideIndex-1]); 
    console.log(slideIndex); 
    slides[slideIndex-1].style.display = "block"; 

    dots[slideIndex-1].className += " active"; 
    captionText.innerHTML = dots[slideIndex-1].alt; 
    } 
}); 

這裏是整個代碼佔位符，不知何故大畫面不工作的codepen，它在我的本地工作： https://codepen.io/anon/pen/prdRXM

Answer 1

確定。 ..由於您使用jQuery來獲取圖像集合，最好繼續使用jQuery來選擇一個。

當使用.eq()方法更高效時，您正在使用純JavaScript支架[]數組語法。

與.eq()一起使用的索引基於零...適合您擁有的元素集合。所以我從slideIndex中刪除了所有-1。

然後，不要循環集合來隱藏它們，只需在整個事情上應用.hide()（再次更高效......並且實際工作）。

另一個問題是關於來自數據屬性的值是文本而不是整數。我使用parseInt()幾個地方。

因此，這裏是你的代碼調試......我將所有console.log()我用：

console.clear(); 

$(function(){ 
    var slideIndex = 0; 
    $('.demo').on("click", function(e) { 
    e.preventDefault(); 
    var o = parseInt($(this).attr("data-slide")); 
    slideIndex = o; 
    showSlides(slideIndex); 
    console.log("o: "+o+" type: "+typeof(o)); 
    }); 

    $('.arrow').on('click', function (e){ 
    e.preventDefault(); 
    var g = parseInt($(this).attr('data-move')); 
    console.log($(this).attr('data-move')); 
    console.log("g in arrow: "+g+" Type: "+typeof(g)); 
    slideIndex += g; 
    showSlides(slideIndex); 
    }); 

    /*  // Moved lower... "showSlides" is not defined yet here. 
    function plusSlides(n) { 
    slideIndex += parseInt(n); 
    showSlides(slideIndex); 
    } 
    showSlides(slideIndex); 
    */ 

    function showSlides(n) { 
    console.log("n in showslide: "+n+" Type: "+typeof(n)); 

    //var i; 
    var slides = $(".mySlides"); 
    var dots = $(".demo"); 
    var captionText = $("#caption"); 

    if (n > slides.length-1) {slideIndex = 0} 
    if (n < 0) {slideIndex = slides.length-1} 

    // Why loops? 
    /* 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    */ 

    // This works great instead of loops 
    slides.hide(); 
    dots.hide(); 

    console.log(slides.eq(slideIndex)); 
    console.log(slideIndex); 


    //slides[slideIndex-1].style.display = "block"; 
    //dots[slideIndex-1].className += " active"; 
    slides.eq(slideIndex).show().addClass("active"); 

    //captionText.innerHTML = dots[slideIndex-1].alt; 
    captionText.html(dots.eq(slideIndex).attr("alt")); 
    } 

    function plusSlides(n) { 
    console.log("n in plusslide: "+n+" Type: "+typeof(n)); 
    slideIndex += parseInt(n); 
    showSlides(slideIndex); 
    } 
    showSlides(slideIndex); 
}); 

CodePen