javascript - 如何使用 jQuery 将 HTML 数据值作为字符串获取？

Question

我的源 HTML 中有以下内容：

<li><a href="#" data-value="01">Test</a></li>

我想获取数据属性的值，所以我使用以下内容：

var abc = $(this).data('value');

这可以正常工作，但如果有前导零则不行。例如，上面将值“1”放入 abc。

有没有办法让我不将“01”转换为“1”？

Answer 1

this.dataset.value;

// Or old school
this.getAttribute('data-value');

const a = document.querySelector("a");
console.log('Using getAttribute, old school: ', a.getAttribute('data-value'));
console.log('Using dataset, conforms to data attributes: ', a.dataset.value);

<ul>
  <li><a href="#" data-value="01">Test</a></li>
</ul>

感谢@MaksymMelnyk 对数据集的提醒

Answer 2

您可以使用 jQuery 的 attr() 运算符：

var abc = $(this).attr('data-value');

Answer 3

从jQuery data() 文档看来，您必须使用 .attr() 来防止自动类型转换：

每次尝试都将字符串转换为 JavaScript 值（这包括布尔值、数字、对象、数组和 null），否则将其保留为字符串。要将值的属性作为字符串检索而不进行任何转换，请使用 attr() 方法。当数据属性是对象（以'{'开头）或数组（以'['开头）时，则使用jQuery.parseJSON来解析字符串；它必须遵循有效的 JSON 语法，包括引用的属性名称。data- 属性在第一次访问 data 属性时被拉取，然后不再被访问或改变（然后所有数据值都存储在 jQuery 内部）。

因此，不要重复其他答案，而是要加强，在不进行类型转换的情况下访问属性的方法是：

var abc = $(this).attr('data-value');

Answer 4

$(this).attr('data-value');

这将返回带有前导 0 的字符串值。

Answer 5

你有没有尝试过？：

$(this).attr('data-value');

或者

$(this).attr('data-value').toString();

Answer 6

尝试 ：

this.data('value');

我认为这是获取数据属性值的最佳方式。

Answer 7

<article id="electric-cars" data-columns="3"data-index-number="12314" data-parent="cars">

</article>


const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.index-number // "12314"
article.dataset.parent // "cars"