Ненавязчивый JavaScript без параметров функций

Question

, если у вас есть

<div id="data" onclick="handleData(1)">Datum 1</div> 

и вы хотите связать поздно вместо:

<div id="data">Datum 1</div> 
<script> 
    $("#data").click(function() { 
     handleData(1); 
    }) 
</script> 

Как вы передать этот параметр 1? вам нужно сделать что-то вроде этого:

<div id="data" data="1">Datum 1</div> 
<script> 
    $("#data").click(function() { 
     handleData($(this).attr("data");); 
    }) 
</script> 

Answer 1

Я предполагаю, что вы используете jQuery.

Если да, я бы воспользовался поддержкой jQuery для атрибута HTML5 data-, используя метод data()^(docs). Это будет во всех браузерах.

<div id="data" data-number="1">Datum 1</div> 
<script> 
    $("#data").click(function() { 
     handleData($(this).data("number")); 
    }) 
</script> 

Обратите внимание, что я изменил атрибут data-number, и доступ к нему с .data("number"). Для этого требуется jQuery 1.4.3 или более поздняя версия.

Из документов:

По JQuery 1.4.3 HTML 5 данных- атрибуты будут втянется автоматически к объекту данных JQuery в.

Answer 2

Ваш последний подход почти правильный. Вы должны использовать атрибут data в качестве префикса в форме data-someproperty. Затем вы можете получить доступ к нему через $(this).data("someproperty") или $(this).attr("data-someproperty").

Редактировать: Подробнее о: jQuery.data().

Answer 3

Предполагая, что имеется более одного элемента данных, да, вам придется передать этот параметр другим способом. Он не должен быть в HTML, хотя:

<div class="data">one</div> 
<div class="data">two</div> 
<div class="data">three</div> 

<script> 
    $('.data').each(function(ix){$(this).click(function(){handleData(ix)})}); 
</script> 

Это немного злоупотреблению документа-заказа, но это довольно ненавязчиво.