在腳本中設置鼠標懸停

Question

我一直致力於星級評分系統的腳本，通過onClick事件保存填充的星星，並將onmouseover值更改爲null，以便將鼠標從其後移開不會混亂該表格有多個評級和一個清晰的按鈕在底部，我需要通過下面的功能重置onmouseover事件，但在這些，評級[y]和x被採取是文字而不是它們包含的內容，並且使onmouse事件失敗，因爲參數不正確。以這種方式更改事件時如何放入變量？

 var ratings = new Array("happy", "clean"); 
    for(y = 0; y < 2; y++) 
    { 
    for(x = 0; x < 5; x++) 
    { 
    fullname = ratings[y] + '_' + x; 
    document.getElementById(fullname).onmouseover = function onmouseover() { star_rate(ratings[y], x, 1); }; 
    document.getElementById(fullname).onmouseout = function onmouseover() { star_rate(ratings[y], x, 2); }; 
    } 
    } 

Answer 1

您可以通過使用一個函數調用來爲每個處理器下一個上下文（見下文），這樣做：

var ratings = new Array("happy", "clean"); 
for(y = 0; y < 2; y++) 
{ 
    for(x = 0; x < 5; x++) 
    { 
     fullname = ratings[y] + '_' + x; 
     (function(thisx, thisy) { 
      document.getElementById(fullname).onmouseover = function() { 
       star_rate(ratings[thisy], thisx, 1); 
      }; 
      document.getElementById(fullname).onmouseout = function() { 
       star_rate(ratings[thisy], thisx, 2); 
      }; 
     })(x, y); 
    } 
} 

通過傳遞x和y作爲參數到工作一個函數，然後建立使用參數，而不是x和y外環的版本的事件處理程序。 （我也刪除了上述事件處理程序分配的功能名稱。在函數表達式[，而不是一個函數聲明]使用的名稱是在某些瀏覽器有問題，more here。另外，你叫他們倆onmouseover，這可能不是你的意思做。:-)）

但是，這不是我建議你這樣做。它爲每個元素創建一個新的函數。相反，我可能會將必要的信息作爲屬性存儲在元素本身上，併爲所有這些使用通用函數。這就是HTML5的data-前綴所適用的（即使在技術上無效的情況下，它現在也能正常工作）。隱約的東西是這樣的：

var ratings = new Array("happy", "clean"); 
var element; 
for(y = 0; y < 2; y++) 
{ 
    for(x = 0; x < 5; x++) 
    { 
     fullname = ratings[y] + '_' + x; 
     element = document.getElementById(fullname); 
     element.setAttribute('data-star-x', x); 
     element.setAttribute('data-star-y', y); 
     element.onmouseover = handleMouseOver; 
     element.onmouseout = handleMouseOut; 
    } 
} 

function handleMouseOver() { 
    star_rate(this.getAttribute('data-star-y'), this.getAttribute('data-star-x'), 1); 
} 
function handleMouseOut() { 
    star_rate(this.getAttribute('data-star-y'), this.getAttribute('data-star-x'), 2); 
} 

你甚至可以使用事件冒泡（因爲鼠標懸停及移出泡沫）掛鉤的整體容器，而不是每個元素的事件，因爲你得到的元素中的數據。 （這有時也被稱爲「事件委託」。）

Answer 2

你的問題是種寫得不好，所以我不知道究竟你的戰鬥。但我認爲你的問題可能是x和y在onmouseover調用中不可見。你可以通過很多方法來解決這個問題，主要是將x和y附加到元素中，這樣它就可以從函數中獲取。其中一種方法如下：

var ratings = new Array("happy", "clean"); 
for(y = 0; y < 2; y++) 
{ 
    for(x = 0; x < 5; x++) 
    { 
     fullname = ratings[y] + '_' + x; 

     var ele=document.getElementById(fullname); 
     ele.setAttribute("data-ratings",y+","+x); 

     ele.onmouseover = function onmouseover() 
     { 
      var split=this.getAttribute("data-ratings","").split(","); 
      var y=split[0]; 
      var x=split[1]; 
      star_rate(ratings[y], x, 1); 
     }; 
     ele.onmouseout = function onmouseover() 
     { 
      var split=this.getAttribute("data-ratings","").split(","); 
      var y=split[0]; 
      var x=split[1];   
      star_rate(ratings[y], x, 2); 
     }; 
    } 
}