自定义属性值

Question

我试图理解一些我最初没写过的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语句是否传回对DOM中具有toggle-state=OFF属性的元素的引用？我之前从未见过基于自定义属性的选择器，并且不确定我是否正确理解它。

Answer 1

选择器"[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>

Answer 2

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