javascript - 在 jquery 库中获取未定义的错误

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

这是带有占位符的整个代码的代码笔，不知何故大图不起作用，它在我的本地主机上有效: 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