0 
<script type="text/javascript"> 
    var interval; 
    $('#105').mouseover(function()
    { mouseOver('105'); });
    $('#105').mouseout(function()
    { mouseOut('105') ;});
    function mouseOver(videoId) 
    {   var num = 2;
        interval = setInterval(function() 
        { $('#'+videoId).attr('src', '../thumbs/268255615/268255615.'+num+'.jpg');
        if(num == 12)
        { num = 1; }
        else
        { num++; }},500);   }
    function mouseOut (videoId)
    { clearInterval(interval); $('#'+videoId).attr('src', '../thumbs/268255615/268255615.1.jpg'); } 
</script>


<script type="text/javascript"> 
    var interval; 
    $('#104').mouseover(function()
    { mouseOver('104'); });
    $('#104').mouseout(function()
    { mouseOut('104') ;});
    function mouseOver(videoId) 
    {   var num = 2;
        interval = setInterval(function() 
        { $('#'+videoId).attr('src', '../thumbs/325082397/325082397.'+num+'.jpg');
        if(num == 12)
        { num = 1; }
        else
        { num++; }},500);   }
    function mouseOut (videoId)
    { clearInterval(interval); $('#'+videoId).attr('src', '../thumbs/325082397/325082397.1.jpg'); } 
</script>

上記のコードは、JavaScript の画像回転子です。コードの問題は、最後の画像パスが常にそれより前の画像パスを上書きすることです。

たとえば、パス 1path one = thumbs/imagea.jpgの場合path two = thumbs/imageb.jpg("thumbs/imagea.jpg")、ホバーするとパス 2 になる場合 ("thumbs/imageb.jpg") の場合

このスクリプトは、何が間違っているのか、またはアイデアが変更されたのかを把握しようとして、ある時点で機能しましたか?

4

1 に答える 1

0

これは明らかです。mouseOver を関数として再定義しています。2 回目に定義すると、最初の関数が上書きされます。これは、window-scope で mouseOver が定義されているためです。2 つのブロックに分割しても、それは変わりません。また、「間隔」も 2 回定義されているため、ここでも名前の競合が発生することに注意してください。

解決策は、クロージャーを使用するか、いずれかの関数の名前を変更するか、2 つの関数を 1 つにマージすることです。

クロージャーは、各スクリプトを次のブロックでラップすることによって行われます。

(function() {
  // your script here
}());

マージされた関数は次のようになります。

var i, setupImage, images;
images = [
    { "id" : "#104", "prefix" : "../thumbs/325082397/325082397." },
    { "id" : "#105", "prefix" : "../thumbs/268255615/268255615." }
];

setupImage = function (image) {
    'use strict';
    var interval;
    $(image.id).mouseover(function () {
        var num = 2;
        interval = setInterval(function () {
            $(image.id).attr('src', image.prefix + num + '.jpg');
            if (num === 12) {
                num = 1;
            } else {
                num += 1;
            }
        }, 500);
    });
    $(image.id).mouseout(function () {
        $(image.id).mouseout(function () {
            clearInterval(interval);
            $(image.id).attr('src', image.prefix + '1.jpg');
        });
    });
};

for (i = 0; i < images.length; i += 1) {
    setupImage(images[i]);
}
于 2013-08-03T09:01:19.890 に答える