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

labels没有values，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 2

使用data-*它允许您使用任意字符串。恩。 data-value="hello"。这对任何元素AFAIK都是有效且通用的。要使用的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 3

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

此外，我认为value不是label元素的有效属性。

没有jQuery ......

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

Answer 4

你可以在纯JS中做到这一点;

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>

如何从HTML标记获取属性值

4 个答案: