2016-08-09 90 views
0

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

$('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>

+1

Als Hinweis: 'value' ist nicht gültige Attribute für [' label'] (https://html.spec.whatwg.org/ multipage/forms.html # the-label-element). Gültige Attribute sind 'for', die allgemeinen [globalen Attribute] (https://html.spec.whatwg.org/multipage/dom.html#global-attributes) und [benutzerdefinierte Datenattribute] (https: //html.spec .whatwg.org/multipage/dom.html # custom-data-attribute) ('data-*') –

+0

Mit 'data-*' können beliebige Zeichenketten verwendet werden. Ex. 'data-value =" hallo "' – zer00ne

+0

@ zer00ne Was meinst du mit 'daten- *'? Setzen Sie es wo Wert ist? Wie würde ich den Wert in JQuery zurückbekommen? –

Antwort

2

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>

3

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>

0
$('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'); 
    }); 
}); 
+1

Was ist mit einem 'div'? Hat das ein Wertattribut? –

+0

@Jimenemex Sie sind in der Regel auf Eingabeelemente. – alex

+0

@Jimenemex Nein ['div'] (https://html.spec.whatwg.org/multipage/semantics.html#the-div-element) Elemente haben nur [globale Attribute] (https: //html.spec. whatwg.org/multipage/dom.html#global-attributes) –

0

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>