在Javascript

Question

$(".focus-button").addClass('active'); 
$(".focus-button[data-expand='true']").addClass('active'); 

使用可變控股選擇。如果我存儲在像變量的類選擇：

var btn = $(".focus-button"); 

變量可以在代碼中使用

btn.addClass('active'); // This is correct 
btn[data-expand='true'].addClass('active'); // This is wrong 

我可以知道是使用變量和屬性的正確方法。

Answer 1

您可以使用filter以您想要的方式添加其他選擇器。

將匹配元素的集合減少爲匹配選擇器或通過函數測試的元素。

實施例：

var btn = $(".focus-button"); 
btn.addClass("active"); 
btn.filter("[data-expand='true']").removeClass("active") 

凡

var btn = $(".focus-button"); 
btn.filter("[data-expand='true']") 

相同

$(".focus-button[data-expand='true']") 

Answer 2

情況：

在您的實際代碼，如果你寫：

var btn = $(".focus-button"); 

你將會得到一個focus-button類的所有元素的集合，所以當你寫，btn.addClass('active');它是正確的，它會在類active添加到所有元素這個集合。

問題：

而當你寫：

btn[data-expand='true'].addClass('active'); 

這是錯誤的，因爲JavaScript將其理解爲你在你的btn對象訪問屬性，因爲[]僅用於訪問特定property在object中或特定元素由index在array中。

和btn[data-expand='true']只是一個CSS選擇器。

解決方案：

您可以使用jQuery .filter()作爲意見提出，像這樣：

btn.filter("[data-expand='true']").addClass('active'); 

Answer 3

試試這個片斷：

//$(".focus-button").addClass('active'); 
 
//$(".focus-button[data-expand='true']").addClass('active'); 
 

 

 
var btn = $(".focus-button"); 
 
//btn.addClass('active'); 
 

 
btn.filter("[data-expand='true']").addClass('active');

.active{ 
 
background: #000; 
 
color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="focus-button">F</div> 
 
<div class="focus-button" data-expand="true">E</div>

Answer 4

嘗試此代碼

btn.filter("data-expand='true'").addClass('active');