"loop"是span中的特殊关键字吗？

Question

我有以下HTML:

<span loopx='{"operator":"maxis"}'>hello</span>

如果我想检索其属性值{"operator":"maxis"},我可以简单地使用

$('span[loopx]').each(function(index) {
    var attr = $(this).attr('loopx');
    // attr is the string "{"operator":"maxis"}"
});

但是,对于以下HTML

<span loop='{"operator":"maxis"}'>world</span>

我得到以下结果:

$('span[loop]').each(function(index) {
    var attr = $(this).attr('loop');
    // attr is the string "loop"
});

我想知道,如果loop是span中的特殊关键字？

这是测试代码:http://jsfiddle.net/yccheok/ghggtrfq/4/

Answer 1

有没有 loop在属性span元素:全球唯一的属性.

然而,存在是一个loop在属性audio和video元素.

对于自定义属性,您应该使用HTML5中定义的data属性.

如果您为属性命名data-loop,则可以通过本机访问它element.dataset.loop.

Answer 2

根据规范,loop是一个布尔属性,这意味着您必须通过以下方式之一指定**:

<span loop>
<span loop="">
<span loop="loop">

任何其他值,诸如loop="false"或loop="0"或loop='{"operator":"maxis"}'只是暗示环属性存在和音频/视频会循环.

现在,对于布尔属性,jQuery.attr只返回属性名称.记录此行为,这不是一个错误:

关于布尔属性,考虑由HTML标记定义的DOM元素<input type="checkbox" checked="checked" />,并假设它位于名为的JavaScript变量中elem:

$( elem ).attr( "checked" ) (1.6.1+)(返回)"checked" (字符串)将随复选框状态而变化

解释了这一点后,正确的解决方案是使用HTML5数据属性.jQuery在页面加载时解析数据属性,因此您可以这样做:

$(function() {
  var $span = $("span[data-loop]").first();
  console.log($span.data("loop")); // Object {operator: "maxis"}
  console.log($span.data("loop").operator); // maxis
});

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

<span data-loop='{"operator":"maxis"}'>world</span>

^{**请注意,此属性对span元素无效.}

Answer 3

loop是html5媒体标记中使用的一个属性,它需要一个布尔值true或false值.我希望这就是为什么以上不起作用的原因.