自定义属性值jQuery选择器

我想了解一些我最初没有写的jQuery语法。自定义属性值jQuery选择器

<span id="mySpanElement" toggle-state="ON">Some Sample Text</span> 

function switchOff(selectedControl) { 
    var fieldName = selectedControl.attr('toggle-state'); 
    var newState = fieldName.replace("ON", "OFF"); 
    return $("[toggle-state='" + newState + "']"); 
}

在此功能对return语句传回该有toggle-state=OFF属性的DOM元素的引用？我从来没有见过基于自定义属性的选择器，并且不确定我是否正确理解它。

来源

2015-10-06 webworm

看起来就好象函数将返回所有对象的数组与自定义属性，'切换-state'匹配的任何状态一直切换到。有趣的概念... –

是的。而已。 – Victor

作为提示，我想补充一点，如果有疑问，请打开Chrome开发人员工具，找到代码（在源选项卡上），在JavaScript上放置一个断点，并在断点处被点击时切换到控制台选项卡，然后粘贴到JavaScript中。例如，如果我在return语句中设置了一个断点并且它被命中，我可以将$（“[toggle-state ='”+ newState +“']”）粘贴到控制台选项卡中，它会吐出一个回答。 –

选择器"[toggle-state='" + newState + "']"将匹配文档中具有属性toggle-state设置为newState（本例中为“OFF”）的文档中的每个元素。

使用该选择器作为jQuery的参数将创建一个jQuery对象，其中包含所得到的一组匹配。这个结构就是返回的东西。

下面是一个简单的演示

function switchOff(){ 
 
var newState = "OFF"; 
 
return $("[toggle-state='" + newState + "']") 
 
} 
 

 
$("#result").text(
 
    //$("[toggle-state='" + newState + "']").length 
 
    switchOff().length 
 
);

[toggle-state="ON"]{ 
 
    color:green; 
 
} 
 
[toggle-state="OFF"]{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div toggle-state="ON">Some Sample Text</div> 
 
<div toggle-state="OFF">Some Sample Text</div> 
 
<div toggle-state="OFF">Some Sample Text</div> 
 
<div toggle-state="ON">Some Sample Text</div> 
 
<div toggle-state="OFF">Some Sample Text</div> 
 
<div id="result"><div>

来源

2015-10-06 22:07:33

它返回所有元素的属性toggle-state等于OFF。

来源

2015-10-06 22:07:26

自定义属性值jQuery选择器

回答

相关问题