Question

<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图像旋转器。代码的问题是最后一个图像路径总是覆盖它之前的图像路径。

例如，如果图像path one = thumbs/imagea.jpg和path two = thumbs/imageb.jpg路径一（“thumbs / imagea.jpg”）然后成为路径2，则悬停变为（“thumbs / imageb.jpg”）

这个脚本曾经试图找出错误或改变了什么想法？

Answer 1

这很明显：您将mouseOver重新定义为函数。第二次定义它时，它会覆盖第一个函数。这是因为mouseOver是在window-scope上定义的。将它拆分为两个块并不会改变它。另请注意，“interval”也定义了两次，因此此处也会出现名称冲突。

解决方案是使用闭包，更改任一函数之一的名称或将两个函数合并为一个。

通过将每个脚本包装在以下块中来完成闭包：

(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]);
}

为什么所有图像都更改为第一个输入

1 个答案: