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