Сопоставляя данные к элементу 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 data- attributes, которые работают даже в не-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

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

Answer 4

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

Ваш HTML-код будет выглядеть следующим образом:

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

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

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

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