0

我一直在为星级评分系统编写的脚本，使用 onClick 事件保存填充的星星，并将 onmouseover 和 onmouseout 值更改为 null，因此之后将鼠标移开它们不会搞砸，并且表单有多个评分和底部的清除按钮，我需要通过下面的函数重置 onmouseover 和 onmouseout 事件，但在其中，ratings[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); };
   }
  }
4

2 回答 2

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

这通过将xandy作为参数传递给函数来工作，然后使用参数而不是外部循环的xand版本来设置事件处理程序y。（我还在上面的事件处理程序分配中删除了函数名称。在函数表达式中使用名称[与函数声明相反]在某些浏览器中是有问题的，更多在这里。此外，您将它们都onmouseover称为可能不是你想要做的。:-)）

但我不建议这样做。它为每个元素创建一个新函数。相反，我可能会将元素本身的必要信息存储为属性，并为所有这些使用通用函数。这就是 HTML5data-前缀的用途（现在和今天都可以使用，即使在技术上无效）。有点像这样：

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 冒泡）来挂钩整个容器而不是每个元素上的事件，因为您从元素中获取数据。（这有时被称为“事件委托”。）

于 2010-09-10T14:01:02.860 回答
0

你的问题写得不好，所以我不确定你到底在打什么。但我认为您的问题可能是 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); 
        };
    }
}
于 2010-09-10T14:03:49.163 回答