爲什麼所有的圖像都改爲第一個輸入

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路中的一個（「拇指/ imagea.jpg」），則成爲上懸停路徑中的兩個變

這個劇本曾在一個點試圖（「拇指/ imageb.jpg」）找出什麼是錯誤的或被改變的想法？

Answer 1

這是很明顯的：你正在重新定義鼠標懸停的功能。第二次定義它時，它會覆蓋第一個函數。這是因爲mouseOver是在窗口範圍內定義的。將它分成兩個塊並不會改變這一點。還要注意「間隔」也被定義了兩次，所以名字衝突也會在這裏出現。

的溶液。將要麼使用閉，改變的任一個的功能的名稱或兩個功能合併成一個。

閉包被在下面的塊包裹每個腳本進行：

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