JQuery новичок: как я могу передать аргументы в функцию обработчика событий?

Question

Я смотрю на пример события "click" в документации jQuery здесь . Я могу реорганизовать две анонимные функции следующим образом, и это все еще работает:

$(document).ready(function(){
    $("p").hover(hilite, remove_hilite);
  });

  function hilite()
  {
    $(this).addClass("hilite");
  }

  function remove_hilite()
  {
    $(this).removeClass("hilite");
  }

Однако, что если я захочу передать аргумент hilite? Моим первым предположением было то, что я должен использовать анонимную функцию, такую ​​как this . Однако, похоже, это не работает, даже когда я использую его без аргументов:

$("p").hover(
    function()
    {
        hilite();
    }
    ,
    function()
    {
        remove_hilite();
    }
);

Я также попробовал рефакторинг следующим образом, но это тоже не сработало:

$(document).ready(function(){
    $("p").hover(hilite2, remove_hilite);
  });

  function hilite2(){
     return hilite();
  }

Как правильно это сделать? Я чувствую, что у меня есть большое концептуальное недоразумение. В частности, мне неясно, как в моем первом рефакторинге объект this передается в функцию hilite.

Answer 1

Вы можете инкапсулировать вызов функции зависания в другую функцию, которая принимает параметр 'className':

$.fn.hoverClass = function(className){
    return this.hover(function(){
        $(this).addClass(className);
    }, function(){
        $(this).removeClass(className);
    });
}

Тогда вы можете использовать его просто так:

$('p').hoverClass('hilite');

Answer 2

Я думаю, что вам нужно приложение с частичной функцией .

function partial(func /*, 0..n args */) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var allArguments = args.concat(Array.prototype.slice.call(arguments));
    return func.apply(this, allArguments);
  };
}

С помощью вышеуказанной функции вы можете теперь делать следующее:

$(document).ready(function(){
    var f = partial(hilite, "arg1", "arg2" /*etc...*/);
    $("p").hover(f, remove_hilite);
  });

Ссылка: Как я могу предварительно установить аргументы в вызове функции JavaScript? (Частичное применение функции)

Answer 3

Почему нельзя просто вызвать метод $(this).addClass() в анонимных функциях?

$("p").hover(
  function () {
    $(this).addClass("hilight");
  },
  function () {
    $(this).removeClass("hilight");
  }
);