JQuery передача переменной проблема

Question

    for(var n=0;n<10;n++)
    {
            $('#content-scroll'+n).mousewheel(function(event, delta) {
        if (delta > 0) sliderUp(n-1);
        else if (delta < 0) sliderDown(n-1);
        return false; // prevent default
    });

    n++;
}

У меня проблема с этим кодом, переменная "n" не передается прямо в функцию mouswheel, которая добавит колесо мыши только к числу 9 (последнее число), а не ко всем 10 элементам. Может кто-нибудь объяснить, как передать переменную в эту функцию, чтобы она осталась?

Answer 1

Я использую полностью решение jQuery.

$("[id^='content-scroll']").mousewheel( function(event,delta) {
     var n = this.id.replace(/content-scroll/,'');
     if (delta > 0)
        sliderUp(n);
     else if (delta < 0)
        sliderDown(n);
     event.preventDefault();
});

РЕДАКТИРОВАТЬ : На самом деле, я даже могу попытаться выяснить способ передачи фактического элемента управления соответствием функциям ползунка *, но не зная, что они на самом деле делают, я понятия не имею, как или если это будет работа.

Answer 2

Это слишком много для SO ( в данном случае ). Вам нужно замыкание, чтобы "ловить" значение n в каждой итерации:

for(var n=0;n<10;n++)
{
    (function(n){
        $('#content-scroll'+n).mousewheel(function(event, delta) {
            if (delta > 0) sliderUp(n-1);
            else if (delta < 0) sliderDown(n-1);
            return false; // prevent default
        });
    })(n);
}

Answer 3

Я считаю, что это проблема замыканий в javascript, n на самом деле является ссылкой на внешнюю переменную n. Я считаю, что следующее должно работать вместо:

for(var n=0;n<10;n++)
{
  var localN = n;
  $('#content-scroll'+n).mousewheel(function(event, delta) {
    if (delta > 0) sliderUp(localN-1);
    else if (delta < 0) sliderDown(localN-1);
    return false; // prevent default
  });

  //is this really needed??
  //n++;
}

Answer 4

Причина, по которой код не работает, заключается в том, что переменная n не вычисляется во время цикла.

Вы создаете анонимную функцию в цикле, который вы передаете функции mousewheel, поэтому код в анонимной функции не выполняется, пока колесо мыши даже не появится. К тому времени значение переменной n равно 10, или, возможно, что-то совершенно другое, если вы используете переменную где-либо еще в коде.

Если вместо этого вы используете функцию Function для создания функции из строки, вы можете вставить текущее значение переменной n в код:

for(var n=0; n<10; n++) {

   $('#content-scroll' + n).mousewheel(
      Function('event', 'delta',
         'if (delta > 0) sliderUp(' + (n-1) + ');' +
         'else if (delta < 0) sliderDown(' + (n-1) + ');' +
         'return false; // prevent default'
      )
   );

}

Однако, должно ли это быть (n-1)? Должно ли событие mousewheel для элемента content-scroll0 вызывать sliderup(-1)?

Answer 5

Ваши значения n должны быть 0-9 или 1-10?

Если это 0-9, измените все n-1 выражения на n.

Если это 1-10, измените цикл for на var n=1,n<=10;n++, а все ссылки n-1 на n.

Кроме того, удалите n++ внизу, потому что ваш цикл for уже увеличивает значение n.

Answer 6

JQuery специально разрешает передачу данных о событиях, которые могут или не могут быть полезны вам в этом случае:

for(var n=0;n<10;n++)
{
  $('#content-scroll'+n).bind('mousewheel', {index:n}, function(event, delta) {
    var innerN = event.data.index;
    if (delta > 0) sliderUp(innerN-1);
    else if (delta < 0) sliderDown(innerN-1);
    return false; // prevent default
  });
}