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 が wi​​ndowthisオブジェクトに設定されます。また、画像を設定した後にカウンターをインクリメントする必要があります。そうしないと、配列の境界の外側を読み取ることになります。

最後に、カウンタを 0 にリセットすると、そのelseブロックでイメージがリセットされないため、ループが再開する前にさらに 1 秒の遅延が発生します。ロジックのその部分を書き直したいと思うかもしれません。

更新されたフィドル

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

これは、ループを 1 秒間隔で実行し続けるために私が書くものです。

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

ここでこれをチェックしてください。これはあなたにとって完璧に機能するはずです。私はそれをシングルトンオブジェクトにしました。また、meTooの場合にチェックを行っています。domがロードされる前に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 に答える