Mit variablen Halt Selektoren in Javascript

Question

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

Wenn ich die Klassenauswahl in einer Variablen speichern wie:

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

Die Variable kann als

im Code verwendet wird

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

Darf ich wissen, was ist der richtige Weg, um Variablen mit Attributen zu verwenden.

Answer 1

Sie können filter verwenden, um zusätzliche Selektoren auf die von Ihnen gewünschte Weise hinzuzufügen.

Reduzieren Sie die Menge der übereinstimmenden Elemente auf diejenigen, die mit dem Selektor übereinstimmen oder den Test der Funktion bestehen.

Beispiel:

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

Wo

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

ist die gleiche wie

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

Answer 2

Situation:

wenn

In Ihrem eigentlichen Code schreiben Sie:

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

Sie eine Sammlung aller Elemente mit Klasse erhalten focus-button, so dass, wenn Sie schreiben, btn.addClass('active'); es ist richtig, und es wird die Klasse active auf alle Elemente hinzuzufügen, in diese Sammlung.

Problem:

Während, wenn Sie schreiben:

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

Es ist falsch, weil JavaScript es interpretieren, wie Sie eine Eigenschaft in Ihrem btn Objekt zugreifen, weil [] nur für den Zugriff verwendet spezifisch property in einem object oder ein spezifisches Element von index in einem array.

Und btn[data-expand='true'] ist nur ein CSS Selektor.

Lösung:

können Sie jQuery .filter() verwenden, wie in den Kommentaren vorgeschlagen, wie folgt aus:

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

Answer 3

versuchen, diese Schnipsel:

//$(".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

Versuchen Sie diesen Code

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