So erhalten Sie Attributwert von HTML-Tags

Question

Ich versuche, den Wert aus dem HTML-Tag zu erhalten. Nicht der Text selbst, sondern der Attributwert. Was mache ich falsch?

$('label').click(function() { 
 
    $('p').text(($(this).val())); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label value="hello">click</label> 
 
<p></p>

Answer 1

Verwenden data-* ermöglicht es Ihnen, eine beliebige Zeichenfolge zu verwenden. Ex. data-value="hello". Dies ist gültig und universell für jedes Element AFAIK. Die jQuery-Methode zu verwenden ist .data()

$('label').click(function() { 
 
    $('p').text($(this).data('value')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label data-value="hello">click</label> 
 
<p></p>

Answer 2

labels haben nicht values, input und andere form Elemente können Werte aufweisen. In Ihrem Fall ist es die attr Funktion von jQuery, um Attributwerte zu erhalten. Und die zusätzlichen Klammern um diesen Getter sind nicht nötig.

$('label').click(function() { 
 
    $('p').text($(this).attr("value")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label value="hello">click</label> 
 
<p></p>

Answer 3

$('label').click(function() { 
    var value = $(this).attr('value'); 
}); 

Auch ich glaube nicht, value ist ein gültiges Attribut auf einem label Element.

Ohne jQuery ...

Array.from(document.querySelectorAll('label')).forEach((label) => { 
    label.addEventListener('click',() => { 
     let value = label.getAttribute('value'); 
    }); 
}); 

Answer 4

Sie mögen dies in reinem JS tun können;

var lab = document.getElementsByTagName("label")[0], 
 
    pel = document.getElementsByTagName("p")[0]; 
 
lab.onclick = e => pel.textContent = e.currentTarget.getAttribute("value");

<label value="hello">click</label> 
 
<p></p>