在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

您可以使用過濾器以所需的方式添加其他選擇器。

將匹配元素的集合減少到與選擇器匹配或通過功能測試的元素。

例：

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");

您將使用class focus-button獲得所有元素的集合，因此在編寫時， btn.addClass('active'); 是正確的，它將把active類添加到此集合中的所有元素。

問題：

當你寫的時候：

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

這是錯誤的，因為JavaScript將在您訪問btn對象中的屬性時對其進行解釋，因為[]僅用於按array的index訪問object的特定property或特定元素。

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');