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

在Javascript中使用变量保持选择器

4 个答案: