Question

我一直致力于制作星级评分系统的剧本，通过onClick事件保存已填充的星星并更改onmouseover＆amp; onmouseout值为null，因此之后将鼠标移开它们不会弄乱它，并且表单底部有多个等级和一个清除按钮，我需要重置onmouseover＆amp; 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); };
   }
  }

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版本和{{1 }}。（我还删除了上面事件处理程序分配中的函数名。在某些浏览器more here中使用函数表达式中的名称[而不是函数声明]是有问题的。而且，你调用它们两个y，这可能不是你想要做的。:-)）

但这不是我建议的方式。它为每个元素创建一个新函数。相反，我可能会将元素本身的必要信息存储为属性，并为所有这些使用通用函数。这就是HTML5的onmouseover前缀的用途（现在，即使在技术上无效，它现在也可以使用）。有点模糊的东西：

data-

您甚至可以使用事件冒泡（因为鼠标悬停和鼠标输出气泡）将事件挂钩到整个容器而不是每个元素，因为您从元素获取数据。（这有时被称为“事件委托”。）

Answer 2

你的问题写得不好，所以我不确定你到底在做什么。但我认为你的问题可能是在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); 
        };
    }
}

在脚本中设置鼠标悬停

2 个答案: