Связывание данных с элементом DOM для jQuery

Question

В прошлой жизни я мог бы сделать что-то вроде этого:

<a href="#" onclick="f(311);return false;">Click</a><br/>
<a href="#" onclick="f(412);return false;">Click</a><br/>
<a href="#" onclick="f(583);return false;">Click</a><br/>
<a href="#" onclick="f(624);return false;">Click</a><br/>

Теперь с jQuery я мог бы сделать что-то вроде этого:

<a class="clicker" alt="311">Click</a><br/>
<a class="clicker" alt="412">Click</a><br/>
<a class="clicker" alt="583">Click</a><br/>
<a class="clicker" alt="624">Click</a><br/>

<script language="javascript" type="text/javascript">
    $(".clicker").bind("click", function(e) {
        e.preventDefault();
        f($(this).attr("alt"));
    });
</script>

За исключением того, что использование атрибута alt для передачи данных из DOM в jQuery выглядит как хак, так как это не его предназначение. Каков наилучший способ хранения / сокрытия данных в DOM для доступа к jQuery?

Answer 1

JQuery.data позволяет связать словарь с элементом DOM. Эти данные могут быть установлены через jQuery:

<a class="clicker">Click</a><br/>
<a class="clicker">Click</a><br/>
<a class="clicker">Click</a><br/>
<a class="clicker">Click</a><br/>

<script language="javascript" type="text/javascript">
    var values = new Array("311", "412", "583", "624");
    $(".clicker").each(function(i, e) {
       $(this).data('value', values[i]).click(function(e) { 
         f($(this).data('value'));
       });
    });
</script>

или (начиная с jQuery 1.4.3) с использованием атрибутов данных HTML5, которые работают даже в документах, отличных от HTML5:

<a class="clicker" data-value="311">Click</a><br/>
<a class="clicker" data-value="412">Click</a><br/>
<a class="clicker" data-value="583">Click</a><br/>
<a class="clicker" data-value="624">Click</a><br/>

<script language="javascript" type="text/javascript">
    $(".clicker").click(function(e) { 
       f($(this).data('value'));
    });
</script>

Answer 2

Вы можете использовать атрибут id, например, "clicker-123", а затем проанализировать число. Я обычно делаю это или использую атрибут rel.

Так что, по сути, нет лучшего способа сделать это, о чем я знаю. Я надеюсь, что эта тема доказывает меня неправильно.

Answer 3

Лучше всего использовать новую функцию HTML5: data-...атрибута по.

Ваш HTML-код будет выглядеть так:

<a class="clicker" data-mynumber="311">Click</a>

Тогда вы можете использовать el.attr('data-mynumber') чтобы получить данные.

Вместо mynumber вы можете выбрать любое имя.

Это работает во всех браузерах.

Answer 4

Извините, но если вы уже заполняете тег alt, я не вижу, как отсрочка назначения обработчика onclick для jQuery фактически покупает вас. Разве это не просто случай "Теперь, когда у меня есть молоток, каждая проблема выглядит как гвоздь". Я думаю, что метод jquery лучше всего использовать, когда действие не зависит от дополнительных данных, чем те, которые могут быть естественным образом получены из содержимого, например, определения класса, типа тега и т. Д.