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

#php #javascript #jquery #html #variables

#php #javascript #jquery — запрос #HTML #переменные #jquery

Вопрос:

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

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

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

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

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

Ответ №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 исходили из разметки, чтобы вы могли использовать общий обработчик щелчков для многих элементов. Если это так, то первый метод выполняет это.

1. да, это html 5, но люди использовали этот метод задолго до спецификации html5. это недопустимый html, но он работает. помните, что спецификация html5 основана на том, как люди нарушали правила и что люди часто делали. Если вы хотите, чтобы это был действительный html, добавьте его в атрибут class. это наиболее часто используемый метод.

2. Как вы думаете, в каком браузере это не работает? Соглашение об использовании «data-» перед пользовательскими атрибутами — это соглашение, предложенное для HTML5 для предотвращения конфликтов между пользовательскими атрибутами и стандартными атрибутами, но, похоже, оно отлично работает для меня в старых браузерах.

Ответ №2:

Просто — если вы получаете переменную с помощью php:

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

Ответ №3:

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

Ответ №4:

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

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

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

Ответ №5:

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

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