HTMLタグから属性値を取得する方法

Question

HTMLタグから値を取得しようとしています。テキスト自体ではなく、属性値です。私は間違って何をしていますか？

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

使用data-*それはあなたが任意の文字列を使用することができます。例。 data-value="hello"。これは任意の要素AFAIKで有効で普遍的です。 [値]は[ `label`]のために有効な属性ではありません（https://html.spec.whatwg.org/：使用するjQueryのメソッドは、注意点としては.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

labelsvalues、inputを持っていないと、他のform要素が値を持つことができます。したがって、あなたの場合、属性値を受け取るのはjQueryのattr関数です。そして、このゲッターの周りに追加のブラケットは必要ありません。

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

また、私はvalueがlabel要素に有効な属性ではないと思います。あなたは純粋なJSでこのように行うことができますjQueryをなし

...

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

Answer 4

。

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>