JavaScript $（'li'）。length调用引发未捕获的异常

Question

I've built a little webpage with a carousel image slider. 我用轮播图片滑块构建了一个小网页。 The slider has buttons which when clicked upon trigger an image change and also some corresponding text to appear below the slider. 滑块具有按钮，单击这些按钮会触发图像更改，并且一些相应的文本也会出现在滑块下方。 Right now the slider has four images. 现在，滑块具有四个图像。 When I click the 'next image' button past the fourth image, the slideshow and corresponding text blurbs are supposed to start over, but instead my Javascript or JSON throws an error. 当我单击第四张图像后的“下一张图像”按钮时，幻灯片放映和相应的文字说明应该重新开始，但是我的Javascript或JSON引发错误。 The same error is thrown if I click the 'previous image' button when the page first loads. 如果在页面首次加载时单击“上一张图片”按钮，则会引发相同的错误。 This leads me to believe that the problem is near the increment decrement functions, but of course I could be wrong. 这使我相信问题出在增量减量函数附近，但是我当然可能错了。 The error is below and I apologize in advance for its weird codeblock format. 该错误在下方，对于其怪异的代码块格式，我深表歉意。 I'm not experienced with js exceptions so I was unsure what the best format was for posting them. 我没有js异常的经验，所以我不确定发布它们的最佳格式。 I threw all of my html, css and js in one codeblock because I'm unsure if it's the html or js that is causing the exception to be thrown. 我将所有的html，css和js都放在一个代码块中，因为我不确定是引发异常的是html还是js。 Any insights would be greatly appreciated! 任何见解将不胜感激！

Uncaught TypeError: Cannot read property 'Imagedes' of undefinedmoveRight @ ShowcaseWebsiteTest.html:272(anonymous function) @ ShowcaseWebsiteTest.html:281m.event.dispatch @ jquery-latest.min.js:3m.event.add.r.handle @ jquery-latest.min.js:3

<html>
<title>Showcase Website</title>
<meta charset="UTF-8">
<head>
<style>
header {
      width:100%;
      background-color:lightblue;
      text-align:center;
      padding:5px;
  }
  /*Use of the child selector Combinator*/
  header > h1 {
      color: black;
}
  /*Use of Pseudo-Class*/
  p::first-letter {
      font-size: x-large;
}
  /*Use of the Navigation Bar*/
  nav {
      line-height:30px;
      background-color:#8f8f8f;
      height:1500px;
      width:100px;
      float:left;
      padding:5px;
      position: relative;
  }
  /*Pseudo-Class*/
  a:visited {
      color: #00BDA0;
}
  /*Using Box Model, Border, Outline, Margin, Padding, Dimension, Float*/
  section {
      height:350px;
      width:100%;
      padding:10px 0 30px 2px;
      border: 3px solid gray;
      margin: 0px 1px 5px 25px;
  }
  /*Using the "display: none" property to hide a previous title*/
  h1.hidden{
      display: none;
  }
  /*Using Positioning*/
  article.art1 {
      height:350px;
      width:350px;
      float:center;
      padding-top:100px;
      padding-left:50px;
      position: relative;
      top: 125px;
      left: 85px;
  }
/*Using Positioning*/
  aside {
      height:350px;
      width:350px;
      float:right;
      padding-top:10px;
      padding-right:150px;
      position: relative;
      top: 45px;
      left: 45px;
      right: 50px;
  }
  footer {
      background-color:lightblue;
      color:white;
      clear:both;
      text-align:center;
      padding:5px;
  }

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}

html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}

h1 {
color: #fff;
text-align: center;
font-weight: 300;
}

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}

#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}

#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}

button.control_prev, button.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 2% 2%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 10px;
opacity: 0.8;
cursor: pointer;
border:solid transparent;
}

button.control_prev:hover, button.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

button.control_prev {
border-radius: 0 2px 2px 0;
}

button.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

.active{
    color:red;
}
.imageDes{
    color:red;
}
</style>
</head>
<body>
  <main>
    <header>
      <h1>Text</h1>
    </header>

    <nav>
       <a href="">Home</a>
      <br><a href="">How To</a>
      <br><a href="">Additional</a>
      <br>
    </nav>

    <section class="section3">
      <h1>Text</h1>
      <p>
        Text
      </p>
      <ul>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
      </ul>
    </section>


<div id="slider">

  <button class="control_next">></button>
  <button class="control_prev"><</button>
  <ul>
     <li class="active" data-des="Image 1">SLIDE 1</li>
     <li data-des="Image 2" style="background: #aaa;">SLIDE 2</li>
     <li data-des="Image 3">SLIDE 3</li>
     <li data-des="Image 4" style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>
<div class="imageDes"></div>

<footer>
Name Here
    </footer>


  </main>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var dataJson=[{"Imagedes":"Description for Image one which can be so long that it might extend upto 2 lines in most of the cases and that has to be rendered on image change"},
    {"Imagedes":"Description for Image two which can be so long that it might extend upto 2 lines in most of the cases and that has to be rendered on image change"},
    {"Imagedes":"Description for Image three which can be so long that it might extend upto 2 lines in most of the cases and that has to be rendered on image change"},
        {"Imagedes":"Description for Image four which can be so long that it might extend upto 2 lines in most of the cases and that has to be rendered on image change"}]

var index=0;
$('.imageDes').text(dataJson[0].Imagedes);
jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
    moveRight();
   }, 3000);
 });

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');

    });
    if(index<=0)
        index=$('li').length-1;
    else
        index--
    $('.imageDes').text(dataJson[index].Imagedes);
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });

    if(index+1>=$('li').length)
        index=0;
    else
        index++
     $('.imageDes').text(dataJson[index].Imagedes);

};

$('button.control_prev').click(function () {
    moveLeft();
});

$('button.control_next').click(function () {
    moveRight();
});

});
</script>
</body>
</html>

Answer 1

Change $('li').length in your moveRight() and moveLeft() functions to use your slideCount variable. 在moveRight()和moveLeft()函数中更改$('li').length来使用slideCount变量。

Right now $('li').length returns the total number of li elements on the page (which is greater than the number of carousel slides). 现在， $('li').length返回页面上li元素的总数（大于轮播幻灯片的数量）。 This results in your index variable being set to values that are out-of-bounds for your dataJson array, and therefore causing dataJson[index] to return undefined . 这将导致您的index变量设置为dataJson数组的界外值，因此导致dataJson[index]返回undefined 。

JavaScript $（'li'）。length调用引发未捕获的异常

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-07-23 22:55:54

JavaScript $（&#39;li&#39;）。length调用引发未捕获的异常

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-07-23 22:55:54

JavaScript $（'li'）。length调用引发未捕获的异常

解决方案1
3 已采纳 2015-07-23 22:55:54