0

我开始讨厌 javascript 中的对象。

每次我有错误并修复它时，都会出现一个新错误，依此类推。
你能看看下面的代码并告诉我有什么问题吗？

问题信息：
“this.Images is undefined”还有更多错误

HTML 文件

<div id="SlideShow" >
   <img id="img" src="images/img.jpg" alt="" /><span id="desc"></span>
</div>

<script type="text/javascript">
    meToo.Images = ['images/img.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg','images/img5.jpg'];
    meToo.Titles = ['Pic1','pic2','Pic3','Pic4','Pic5'];
    meToo.Play('img');
</script>

Javascript 对象 

var meToo = {
     Images: [],
     Titles: [],
     counter: 0,
     Play: function(ElemID){
         var element = document.getElementById(ElemID);
         var ImgLen = this.Images.length;

         if(this.counter < ImgLen){
             this.counter++;
             element.src = this.Images[this.counter];
             element.nextSibling.innerHTML = this.Titles[this.counter];
         }else{
             this.counter = 0;
         }
         setTimeout(this.Play, 1000);
    }   
};

请参阅示例

4

3 回答 3

3

看到这个问题。否则 setTimeout 设置this为窗口对象。此外，设置图像后计数器应递增，否则您将在数组边界之外读取。

最后，当将计数器重置为 0 时，在循环重新开始之前会有额外的一秒延迟，因为该else块中的图像没有被重置。您可能希望重写这部分逻辑。

更新小提琴

    if(this.counter < ImgLen){
        element.src = this.Images[this.counter];
        element.nextSibling.innerHTML = this.Titles[this.counter];
        this.counter++;
    }else{
        this.counter = 0;
    }
    var _this = this;
    setTimeout(function() { _this.Play('img') }, 1000);

这就是我要写的以保持循环以一秒为间隔进行的内容：

Play: function(ElemID) {
    var element = document.getElementById(ElemID);
    var ImgLen = this.Images.length;

    if (this.counter == ImgLen) {
        this.counter = 0;
    }
    element.src = this.Images[this.counter];
    element.nextSibling.innerHTML = this.Titles[this.counter];
    this.counter++;

    var _this = this;
    setTimeout(function() {
        _this.Play('img')
    }, 1000);
}
于 2012-06-23T17:55:17.943 回答
2 
if(this.counter < ImgLen)

是错的。

这里会发生的是，当你跑步时

this.counter++;

该变量的值现在将是 ImgLen.length

javascript中的数组从0到长度-1。所以现在你将超过数组的长度，当你运行时：

this.Images[this.counter];

并遇到错误。

这里的快速解决方法是更改​​为

if(this.counter < ImgLen -1)

如果您遇到其他问题，请发布确切的错误消息。（在 Chrome 中运行并按 F12（例如）调出控制台，以便查看错误）。

于 2012-06-23T17:47:16.510 回答
0

在这里检查一下。它应该非常适合你。我已经把它变成了一个单例对象，并且我正在检查是否在加载 dom 之前调用了 meToo.Play 它不会崩溃。这些家伙的所有其他错误以上都是指点，也有照顾。

    <script>
    var meToo = function(){
    var Images = ['http://www.image-upload.net/di/WMPI/img.jpg','http://www.image-upload.net/di/HPUQ/img2.jpg','http://www.image-upload.net/di/WQ9J/img3.jpg','http://www.image-upload.net/di/GIM6/img4.jpg','http://www.image-upload.net/di/0738/img5.jpg'];
    var Titles = ['Pic1','pic2','Pic3','Pic4','Pic5'];
    var counter = 0;
    return {
        Play: function(ElemID) {
            var element = document.getElementById(ElemID);
            if(element){
                var ImgLen = Images.length;

                if(counter < ImgLen) {
                    element.src = Images[counter];
                    element.nextSibling.innerHTML = Titles[this.counter];
                    counter++;
                } else {
                    counter = 0;
                }
            }
            setTimeout(callmeToo, 1000);
        }
    }
    }();

    function callmeToo(){
        meToo.Play('img');  
    }

    callmeToo();
</script>
于 2012-06-23T18:37:37.090 回答