Question

我在Microsoft edge（14）和IE（11）上遇到了一些奇怪的行为。我使用JQuery创建了动态元素：

var option1 = $('<li class="btn my-dropdown-item">Option 1</li>');
option1.attr('value', '00:05:00');
option1.attr('value-test', '00:05:00');
var theValue1 = option1.attr('value');
var testValue1 = option1.attr('value-test');

var option2 = $('<li class="btn my-dropdown-item">Option 2</li>');
option2.attr('value', '01:00:00');
option2.attr('value-test', '01:00:00');
var theValue2 = option2.attr('value');
var testValue2 = option2.attr('value-test');

现在预期的结果（例如它们出现在chrome中）是：

theValue1 === "00:05:00"
testValue1 === "00:05:00"
theValue2 === "01:00:00"
testValue2 === "01:00:00"

Edge（14）中的结果：

theValue1 === 0
testValue1 === "00:05:00"
theValue2 ===  1
testValue2 === "01:00:00"

IE（11）中的结果：

theValue1 === "00:05:00"
testValue1 === "00:05:00"
theValue2 ===  1
testValue2 === "01:00:00"

我猜它是某种类型的转换，但我真的不明白这里发生了什么，为什么？ IE / EDGE中存在这些错误吗？我错过了什么吗？

Answer 1

列表项唯一可以具有值的时间是在有序列表中，然后该值只能是数字（整数）。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

此整数属性指示列表的当前序号值项目由元素定义。唯一允许的值属性是一个数字

<ol>
   <li value="0">first</li>
   <li value="1">second</li>   
<ol>

否则只有表单输入才有值。您的列表项不会插入任何位置，也不是有序列表的一部分，但似乎IE和Edge将列表项的值视为数字，这是列表项唯一有效的值。

value-test也不是有效的属性名称。

浏览器如何处理无效标记取决于它，并且当它们无法与具有无效标记的其他浏览器执行相同操作时，它并不是真正的错误。

解决方案非常简单，使用有效的data-*属性，并且适用于所有浏览器

var option1 = $('<li class="btn my-dropdown-item">Option 1</li>');
option1.attr('data-value1', '00:05:00');
option1.attr('data-value2', '00:05:00');
var theValue1 = option1.data('value1');
var testValue1 = option1.data('value2');

var option2 = $('<li class="btn my-dropdown-item">Option 2</li>');
option2.attr('data-value1', '01:00:00');
option2.attr('data-value2', '01:00:00');
var theValue2 = option2.data('value1');
var testValue2 = option2.data('value2');

console.log(theValue1);
console.log(theValue2);
console.log(testValue1);
console.log(testValue2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

值属性类型自动类型转换

1 个答案: