правильный способ встраивать аргументы в JQuery с HTML5?

Question

Чтобы избежать чрезмерных $('#.').click() -функций, я хочу передать аргументы в элементе li.

Что будет правильным в HTML5?

пример:

<ul>
  <li>I'm clickable<code>method|parm1,parm2</code></li>
....
$('li').click(e) function() {
  //I will read the method and serve...

Answer 1

<code> 

Тег

предназначен только для стилизации. Вы, вероятно, должны использовать атрибуты данных, например, так:

<ul>
  <li data-method="method" data-params="parm1,parm2">I'm clickable</li>
   <!--...-->
</ul>

Answer 2

Рассмотрите возможность использования атрибута data.Взгляните на Встраивание пользовательских невидимых данных с атрибутами данных .В вашем случае вы бы сделали что-то вроде:

<ul>
  <li data-code="method|parm1,parm2">I'm clickable</li>
  ....

<script>
  $('li').click(function(e) {
    var code = $(e.target).data("code");
    // I will read the method and serve...

Answer 3

Вы можете использовать атрибут onclick напрямую, или атрибуты data, как упомянуто в других ответах, или даже href="javascript:myFunction(param1, param2);return false;", но сама идея неверна ИМХО.Разметка не должна содержать код.Если так много элементов имеют одинаковый эффект с переменными, используйте универсальный селектор, чтобы сопоставить их все, и используйте атрибуты data, чтобы сохранить значения, и используйте jQuery для вызова кода.Ваш код должен быть отделен от разметки.

Пример. Допустим, вы хотите изменить цвет текста списка, нажав одну из ссылок:

HTML

<ul id="colorChangeDemo">
    <li><a class="color-change" href="#" data-color="#f00">Red</a></li>
    <li><a class="color-change" href="#" data-color="#0f0">Green</a></li>
    <li><a class="color-change" href="#" data-color="#00f">Blue</a></li>
</ul>

JS

$(function() {
    // Note all code is in the same block

    // Note how I cached the things I thought I may need later
    var $colorList = $("#colorChangeDemo");
    var $colorLinks = $colorList.find("a.color-change");

    function changeColor(event) {
        var $colorLink = $(this);
        var color = $colorLink.data("color");
        $colorLinks.css("color", color);
        event.preventDefault();
        return false;
    }

    $colorLinks.click(changeColor); // Can be separate function
});

Live Пример:

http://jsfiddle.net/u6syK/2/

.

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