Question

我仍然是初学者所以请耐心等待。我想用jquery写一个图库。我收到一个未定义的错误： slide [slideIndex-1] .style.display =＆＃34; block＆＃34 ;;

这是我的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;
  }
});

这是一个带有占位符的整个代码的代码，不管怎么说大图片都不起作用，它在我的localhost上工作： https://codepen.io/anon/pen/prdRXM

Answer 1

好的...因为你使用jQuery来获取图像集合，所以最好继续使用jQuery来选择它。

当[]方法更有效时，您正在使用纯JavaScript括号.eq()数组语法。

与.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

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

1 个答案: