Установка наведения мыши внутри скрипта

Question

Сценарий, над которым я работал для системы оценки по звездам, сохраняет заполненные звезды с помощью события 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); };
   }
  }

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, (Я также удалил имена функций в назначениях обработчиков событий выше. Использование имени в выражении функции [в отличие от объявления функции] проблематично в некоторых браузерах, подробнее здесь. Кроме того, вы бы назвали их обоих 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);
}

Вы можете даже использовать всплывающее окно событий (начиная с mouseover и mouseout bubble), чтобы перехватывать события в общем контейнере, а не в каждом элементе, поскольку вы получаете данные из элемента. (Это иногда называют "делегированием события".)

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