Jquery - передает данные встроенным функциям

Question

Это, вероятно, действительно просто, и ответ, вероятно, действительно очевиден, но я рисую здесь пробел.

У меня есть массив элементов HTML, к которым я привязываю событие .hover (). Мне нужно знать, какой индекс массива использовался событием.

Итак, скажем, элемент [7] находится над, как мне передать число 7 этой функции?

Вот что я использую:

for (i=0; i<statecount; i++) {
    $("#"+imagemap[i][0]).hover(function() {
        // Mouse enters HTML element

        alert(i); 

        // "i" returns 15, which makes sense because "i" 
        // has changed since this function was defined.
    });
}

Answer 1

Использование закрытия в качестве оболочки для сохранения состояния.

for (i = 0; i < statecount; i+=1)
{
  (function(i){
    $('#'+imagemap[i][0]).hover(function () {
      alert(i);
    });
  }(i));
}

Answer 2

Если вы используете> = jQuery 1.6, $.proxy будет отображать параметры карри:

$.proxy(function(a, b, c) { ... }, this, 'argA', 'argB', 'argC');

чтобы вы могли написать это так:

for (i=0; i<statecount; i++) {
    $("#"+imagemap[i][0]).hover($.proxy(function(index, event) {
        // Mouse enters HTML element

        alert(index); 
    }, this, i));
}

Обратите внимание, что это выдвигает событие в конец списка аргументов.

Answer 3

Хотя это не отвечает на ваш вопрос, вы можете получить указатель на объект, который был наведен, используя this внутри функции:

for (i=0; i<statecount; i++) {
    $("#"+imagemap[i][0]).hover(function() {
        alert(this);
    }
}

Возможно, вы захотите использовать $(this), есливам нужен объект JQuery.

Answer 4

Будьте осторожны, потому что это легко испортить:

var hoverer = function(i) {
  return function() {
         alert(i); 
  };
};

for (i=0; i<statecount; i++) {
        $("#"+imagemap[i][0]).hover(hoverer(i));
}