Что такое хороший способ передачи аргументов функции при использовании селекторов?

Question

Я пытаюсь изолировать свой HTML от моего js, заменив следующее

<div id = "foo" onclick="bar(variable)"></div>

с

<div id = "foo"></div>
$(document).ready(function()    {
    $("#foo").click(function(event) {
        bar(???);
    });
});

Теперь, что было бы хорошим способом передать параметр для bar().

Должен ли я объединить его с некоторым идентификатором элемента? Или я должен объявить его как переменную JS, используя PHP при загрузке страницы? Или есть лучший способ?

Answer 1

Вы можете поместить атрибут в сам элемент и извлечь его из обработчика щелчка.

<div id="foo" data-item="29"></div>

$(document).ready(function()    {
    $("#foo").click(function(event) {
        bar($(this).data("item"));
    });
});

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

$(document).ready(function()    { 
    $("#foo").click(function(event) { 
        bar(29); 
    }); 
}); 

Но, я думаю, мы все предположили, что вы хотите, чтобы 29 исходили из разметки, чтобы вы могли использовать общий обработчик щелчков для многих элементов. Если это так, то первый метод выполняет это.

Answer 2

Большинство людей думают, что им нужны параметры, чтобы найти элементы, которые являются подэлементом или элементом с известным путем от элемента, по которому щелкнули. Для такого рода вещей лучше всего вообще не использовать параметр, а пройти DOM от узла, по которому щелкнули, чтобы найти соответствующий элемент.

$("#foo").click(function(event) {
  var doSomethingTo = $(this).find('div')[0];
  doSomethingTo.hide();
});

Answer 3

Я бы предложил атрибут данных, как предлагали другие.Это не действительный HTML, но он работает во всех браузерах, которые используются сегодня ...люди, которые предпочитают писать действительный код (в данном случае не я), любят добавлять данные в атрибут класса или просто устанавливают его в javascript.

Answer 4

Простой - если вы получаете переменную, используя php:

<div id="foo"></div>
$(document).ready(function()    {
    $("#foo").click(function(event) {
        bar( <?= $variable ?> );
    });
});

Answer 5

Вы можете сохранить параметр как атрибут данных:

<div id="foo" data-bar="29"></div>

$(document).ready(function()    { 
    $("#foo").click(function(event) { 
        bar($(this).data('bar')); 
    }); 
});