Javascript 在脚本中设置鼠标悬停

我一直在为星级评定系统编写的脚本，使用onClick事件保存填充的星级，并将onmouseover&onmouseout值更改为null，以便以后将鼠标从这些值上移开不会弄乱，并且表单有多个等级，底部有一个清除按钮，我需要通过下面的函数重置onmouseover&onmouseout事件，但在这些事件中，评级[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); };
   }
  }

var评级=新数组（“快乐”、“干净”）；
对于（y=0；y<2；y++）
{
对于（x=0；x<5；x++）
{
全名=评级[y]+'.'+x；
document.getElementById（全名）.onmouseover=函数onmouseover（）{star_rate（ratings[y]，x，1）；}；
document.getElementById（全名）.onmouseout=函数onmouseover（）{star_rate（ratings[y]，x，2）；}；
}
}

您可以使用函数调用为每个处理程序创建下一个上下文（但请参见下文），如下所示：

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

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

---

您甚至可以使用事件冒泡（因为mouseover和mouseout冒泡）来钩住整个容器上的事件，而不是每个元素，因为您是从元素获取数据的。（这有时被称为“活动授权”。

你的问题写得有点糟糕，所以我不确定你到底在争取什么。但我认为你的问题可能是，在onmouseover调用中，x和y是不可见的。您可以通过多种方式解决此问题，主要涉及将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); 
        };
    }
}

var评级=新数组（“快乐”、“干净”）；
对于（y=0；y<2；y++）
{
对于（x=0；x<5；x++）
{
全名=评级[y]+'.'+x；
var ele=document.getElementById（全名）；
元素设置属性（“数据评级”，y+，“+x）；
ele.onmouseover=函数onmouseover（）
{ 
var split=this.getAttribute（“数据评级”）.split（“，”）；
变量y=拆分[0]；
var x=分割[1]；
星级率（评级[y]，x，1）；
};
ele.onmouseout=函数onmouseover（）
{ 
var split=this.getAttribute（“数据评级”）.split（“，”）；
变量y=拆分[0]；
var x=分割[1]；
星级率（评级[y]，x，2）；
};
}
}

“…但我认为您的问题可能是，x和y在onmouseover调用中不可见…”是的，事件处理程序函数是关闭这些变量的闭包。他们只是没有他所期望的价值观。（在调用处理程序时，

y

始终为2，

x

始终为5，除非其他代码在引用的代码完成后更改它们。）