自定義屬性值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選擇器

回答

相關問題