jQuery: как передать $ (this) в качестве параметра функции?

Question

Все примеры jQuery, которые я вижу, имеют встроенные функции.

Если функция довольно длинная или если она может использоваться повторно, я могу захотеть отделить функцию

Например, как я могу включить это

$('#myElement').click(function(){
  $(this).addCss('clicked');
})

в нечто вроде этого

$('#myElement').click(ElementClicked($(this))

function ElementClicked(???){
  ???.addCss('clicked');
}

Спасибо!

Answer 1

Это не сработает:

$('#myElement').click(ElementClicked($(this)));

Выполняет функцию ElementClicked() с любым значением this на момент написания и связывает возвращаемое значение из ElementClicked() с событием click. Что в данном случае ничего.

Вам необходимо передать функцию в событие щелчка, например:

$('#myElement').click(function () { ElementClicked($(this)); });

Это создает (n анонимную) функцию, которая будет связана с событием click, и при запуске функция вызывает ElementClicked(), передавая this. Функция ElementClicked может быть определена как:

function ElementClicked(elem) {
  elem.addClass('clicked');
}

Как вы заметите, this внутри функции, связанной с событием, будет щелкаемым элементом. Таким образом, вместо создания обертки функции, которая вызывает функцию, передающую элемент, вы можете просто сократить его следующим образом:

$('#myElement').click(ElementClicked);

function ElementClicked() {
  $(this).addClass('clicked');
}

Обратите внимание, что функция передается в click() как переменная, а не выполняется немедленно, потому что после нее нет скобок ().

И кстати, вы, вероятно, имеете в виду addClass вместо addCss.

Answer 2

Это просто выражение; Вы передаете это так же, как вы передаете (x + 1) или что-то еще. Дайте ему имя в вашей функции, и вы готовы идти:

function elementClicked(banana) {
    banana.addClass('clicked');
}

Answer 3

лучше разделить между

document.elementByID ( "div1")

$ ( "# div1")

поэтому я предпочитаю приставлять 'j'

jElement = $ ("# div1")

element = document.elementByID ("div1")

Answer 4

$('#myElement').click(function(){
  ElementClicked($(this)); 
})

function ElementClicked(el){
  el.addCss('clicked');
}