Javascript$（'；li'；）。长度调用引发未捕获异常_Javascript_Html_Post Increment_Uncaught Exception_Pre Increment

Javascript$（'；li'；）。长度调用引发未捕获异常

javascript html

Javascript$（'；li'；）。长度调用引发未捕获异常,javascript,html,post-increment,uncaught-exception,pre-increment,Javascript,Html,Post Increment,Uncaught Exception,Pre Increment,我已经建立了一个带有旋转木马图像滑块的小网页。滑块上有一些按钮，单击这些按钮时会触发图像更改，并在滑块下方显示一些相应的文本。现在，滑块有四个图像。当我点击第四张图片之后的“下一张图片”按钮时，幻灯片和相应的文本模糊应该重新开始，但是我的Javascript或JSON会抛出一个错误。如果在第一次加载页面时单击“上一个图像”按钮，则会引发相同的错误。这让我相信问题就在增量-减量函数附近，但我当然可能是错的。下面是错误，我为其奇怪的代码块格式提前道歉。我没有js异常的经验，所以我不确定发布它们的最佳

我已经建立了一个带有旋转木马图像滑块的小网页。滑块上有一些按钮，单击这些按钮时会触发图像更改，并在滑块下方显示一些相应的文本。现在，滑块有四个图像。当我点击第四张图片之后的“下一张图片”按钮时，幻灯片和相应的文本模糊应该重新开始，但是我的Javascript或JSON会抛出一个错误。如果在第一次加载页面时单击“上一个图像”按钮，则会引发相同的错误。这让我相信问题就在增量-减量函数附近，但我当然可能是错的。下面是错误，我为其奇怪的代码块格式提前道歉。我没有js异常的经验，所以我不确定发布它们的最佳格式。我在一个代码块中抛出了所有html、css和js，因为我不确定引发异常的是html还是js。如有任何见解，将不胜感激

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


展示网站
标题{
宽度：100%；
背景颜色：浅蓝色；
文本对齐：居中；
填充物：5px；
}
/*子选择器组合器的使用*/
标题>h1{
颜色：黑色；
}
/*伪类的使用*/
第一个字母{
字号：x大号；
}
/*导航栏的使用*/
导航{
线高：30px；
背景色：#8F8F；
高度：1500px；
宽度：100px；
浮动：左；
填充物：5px；
位置：相对位置；
}
/*伪类*/
a:参观了{
颜色：#00BDA0；
}
/*使用长方体模型、边框、轮廓、边距、填充、标注、浮动*/
部分{
高度：350px；
宽度：100%；
填充：10px 0 30px 2px；
边框：3倍纯色灰色；
利润率：0px 1px 5px 25px；
}
/*使用“显示：无”属性隐藏以前的标题*/
h1.隐藏{
显示：无；
}
/*使用定位*/
第1条第1条{
高度：350px；
宽度：350px；
浮动：中心；
填充顶部：100px；
左侧填充：50px；
位置：相对位置；
顶部：125px；
左：85像素；
}
/*使用定位*/
旁白{
高度：350px；
宽度：350px；
浮动：对；
填充顶部：10px；
右侧填充：150px；
位置：相对位置；
顶部：45px；
左：45像素；
右：50px；
}
页脚{
背景颜色：浅蓝色；
颜色：白色；
明确：两者皆有；
文本对齐：居中；
填充物：5px；
}
@导入url(http://fonts.googleapis.com/css?family=Open+Sans:400300600）；
html{
边框顶部：5px实心#fff；
背景：#58DDAF；
颜色：#2a2a2a；
}
html，正文{
保证金：0；
填充：0；
字体系列：“开放式SAN”；
}
h1{
颜色：#fff；
文本对齐：居中；
字体大小：300；
}
#滑块{
位置：相对位置；
溢出：隐藏；
保证金：20px自动0自动；
边界半径：4px；
}
#滑块ul{
位置：相对位置；
保证金：0；
填充：0；
高度：200px；
列表样式：无；
}
#李小玲{
位置：相对位置；
显示：块；
浮动：左；
保证金：0；
填充：0；
宽度：500px；
高度：300px；
背景：#ccc；
文本对齐：居中；
线高：300px；
}
button.control\u上一步，button.control\u下一步{
位置：绝对位置；
最高：40%；
z指数：999；
显示：块；
填充：2%2%；
宽度：自动；
高度：自动；
背景：#2a2a；
颜色：#fff；
文字装饰：无；
字号：600；
字体大小：10px；
不透明度：0.8；
光标：指针；
边框：实心透明；
}
按钮。控件上一个：悬停，按钮。控件下一个：悬停{
不透明度：1；
-webkit过渡：所有0.2秒轻松；
}
按钮控制按钮{
边界半径：0 2px 2px 0；
}
按钮。控制下一步{
右：0；
边界半径：2px 0 0 2px；
}
.U选项{
位置：相对位置；
利润率：10px自动；
宽度：160px；
字号：18px；
}
.主动{
颜色：红色；
}
.imageDes{
颜色：红色；
}
正文






正文

正文


正文
正文
正文

>
在moveRight（）
和moveLeft（）
函数中更改$（'li'）.length
，以使用slideCount
变量
现在$（'li'）。length
返回页面上li
元素的总数（大于旋转木马幻灯片的数量）。这导致index
变量被设置为超出dataJson
数组边界的值，从而导致dataJson[index]
返回未定义的
更改$（'li'）。在moveRight（）
和moveLeft（）中的长度
函数使用您的slideCount
变量
现在$（'li'）。length
返回页面上li
元素的总数（大于旋转木马幻灯片的数量）。这导致index
变量被设置为超出dataJson
数组边界的值，从而导致dataJson[index]
返回未定义的
更改$（'li'）。在moveRight（）
和moveLeft（）中的长度
函数使用您的slideCount
变量
现在$（'li'）。length
返回页面上li
元素的总数（大于旋转木马幻灯片的数量）。这导致index
变量被设置为超出dataJson
数组边界的值，从而导致dataJson[index]
返回未定义的
更改$（'li'）。在moveRight（）
和moveLeft（）中的长度
函数使用您的slideCount
变量
现在$（'li'）。length
返回页面上li元素的总数（大于旋转木马幻灯片的数量）。这将导致您的
<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>