Korzystanie html „teleinformatyczny” atrybut

Question

Rozważmy linię takich jak ten:

<div id='abc' onclick='DoSomething(this.id)'></div> 

Teraz załóżmy, że jest to rozszerzona być czymś więcej tak:

<div id='abc' data-something='whatever' onclick='DoSomething(this.id)'></div> 

Nie ma żadnej różnicy funkcjonalnej tu jeszcze , ale to jest moje pytanie. Szukam sposobu przekazania wartości "danych-coś" do funkcji DoSomething zamiast id. Nie mogę znaleźć sposobu na zrobienie tego? Czy to możliwe?

Coś jak poniżej byłoby miło, ale oczywiście nie tak to działa. (Jestem w tym tylko to, aby pomóc zilustrować zamierzony cel.

<div id='abc' data-something='whatever' onclick='DoSomething(this.data-something)'></div> 

Answer 1

Powinieneś być w stanie zrobić this.getAttribute("data-something"), tak:

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something"))></div> 

lub użyć this.dataset.something.

Here is my source

Answer 2

Można zrobić

DoSomething(this.dataset.something) 

Ale to zazwyczaj zaleca się, aby oddzielić część JavaScript i HTML, co jest szczególnie łatwe kiedy twój element ma ID:.

<div id='abc' data-something='whatever'></div> 
<script> 
    document.getElementById('abc').onclick = function(){ 
     DoSomething(this.dataset.something) 
    } 
</script> 

na Internet Explorer, support for dataset is incomplete na IE10-, trzeba użyć

DoSomething(this.getAttribute('data-something')) 

Answer 3

Należy użyć getAttribute metody:

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something")'></div> 

Ale bardzo sugerujemy aviod inline JavaScript delegacja do elementów. Powinieneś lepiej użyć DOM lub jQuery do tego i pamiętać, że jQuery ma metodę łatwiejszego obsługi atrybutów danych- *.

Answer 4

jeśli chcesz rozważyć jQuery można przekształcić kod w latków tak:

html

<div id="abc" data-something="whatever">click here</div> 

jQuery

jQuery(document).ready(function($) { 
    $('#abc').on('click', function() { 
     DoSomething($(this).attr('data-something')); 
    }); 
}); 

lub lepiej

jQuery(document).ready(function($) { 
    $('#abc').on('click', function() { 
     DoSomething($(this)); 
    }); 
}); 

function DoSomething(obj){ 
    alert(obj.attr('id')); 
    alert(obj.attr('data-something')); 
}