javascript Console.log 仅打印列表值的初始整数部分而不是完整值。查看代码了解更多详情

Question

我在要打印的列表中有字母数字值，但 console.log 只打印它的初始整数部分而不是完整值。这是html部分。

<div class="folder-menu" id="folder-list">
<ul>
    <li value="100000685a35ba54b87d4e16952b3e196b1219c7"><a href="#">testing<span class="folder-menu-count">0</span></a></li>
    <li value="100000689438bffac5934f97be1b15d7f5147e39"><a href="#">test1<span class="folder-menu-count">0</span></a></li>
    <li value="10000068d412927da1cb4d42afba45c53f415c0e"><a href="#">test<span class="folder-menu-count">0</span></a></li>
    <li value="10000068f141dbc2945347b0a71b2eddbbeda914"><a href="#">teasf<span class="folder-menu-count">0</span></a></li>                
</ul>

这是javascript

$("#folder-list ul li a").click(function(event){
    console.log("this is the value "+$(this).parent().attr('value'));
    console.log("this is the value "+$(this).parent().val());
});

在我点击列表中的第一个元素后，它打印

这是值 100000685//而不是 100000685a35ba54b87d4e16952b3e196b1219c7

这是值 100000685//而不是 100000685a35ba54b87d4e16952b3e196b1219c7

有人可以说这段代码有什么问题吗？

Answer 1

HTML 代码无效，因此浏览器会尽力尝试更正它。 li 元素的 value 属性应该是一个数值。

您正在使用的特定浏览器被设计为使用可以解释为数字的属性部分，因此它将 chop 数字结尾处的值。不同的浏览器会以不同的方式处理这个问题。例如，Firefox 将在您使用 attr('value') 时返回原始值，而在使用 val() 时返回 chop 后的值。

li 元素的 value 属性中不能可靠地存储数字以外的任何内容。要存储字母数字值，您应该将其放在其他地方。例如，您可以使用 class 属性或 data- 属性。