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