在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