jQuery Split Variablenwerte im Array

Question

Ich habe ein Div mit einer ID von '#Main "und ich versuche, CSS-Klassen für dieses div mit einer Sammlung von Variablen zu ändern. Mit +' '+ zwischen den Variablen scheint viel Leerraum zwischen den Klassen hinzufügen, deshalb war ich versucht, alle Variablen in einem Array zu verwenden, hinzufügen und Split-Eigenschaft verwenden, aber so weit ich bin so zu tun, nicht in der Lage

Mein Code:.

jQuery

var MainClasses =""; 
var BackgroundColor=""; 
var BackgroundPattern =""; 
var TxtColor=""; 

// Some code & conditions here which is assigning CSS classes to these variables 

BackgroundColor = "Background-Red"; 
BackgroundPattern ="Pattern-2"; 
TxtColor = "Txt-Color-Green"; 

upDateTheme(); 

function upDateTheme() { 
    $('#Main').removeClass(); 
    var ClassColletion = 'BackgroundColor, BackgroundPattern, TxtColor'; 
    MainClasses = ClassColletion.split(' '); 
    $('#Main').addClass(MainClasses); 
} 

Expected HTML Ergebnis

<div id="Main" class="Background-Red Pattern-2 Txt-Color-Green"> Some Content here </div> 

Answer 1

Ein paar Dinge hier:

1. Sie brauchen nicht Ihre MainClasses Objekt in eine Zeichenfolge zu initialisieren. Verwenden Sie diese zusätzliche Variable nicht einmal. Verwenden Sie einfach Ihre ClassCollection.
2. Wenn Sie die split tun, Split auf das Komma, nicht das Leerzeichen.
3. Setzen Sie Ihre Variablen in ein Array.
4. Verwenden Sie eine Schleife, um die Klassennamen (addClass) anzuwenden. Array-Objekte werden nicht standardmäßig unterstützt.

Dies sollte erhalten Sie gehen:

var BackgroundColor=""; 
 
var BackgroundPattern =""; 
 
var TxtColor=""; 
 

 
// Some code & conditions here which is assigning CSS classes to these variables 
 

 
BackgroundColor = "Background-Red"; 
 
BackgroundPattern ="Pattern-2"; 
 
TxtColor = "Txt-Color-Green"; 
 

 
upDateTheme(); 
 

 
function upDateTheme() { 
 
    $('#Main').removeClass(); 
 
    var ClassColletion = [BackgroundColor,BackgroundPattern,TxtColor]; 
 
    for (var i in ClassColletion) { 
 
     if (i && ClassColletion[i]) { 
 
      $('#Main').addClass(ClassColletion[i]); 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='Main'>main div</div>

Answer 2

Von jQuery documentation:

.addClass(className)

classname; Typ: Zeichenfolge; Eine oder mehrere durch Leerzeichen getrennte Klassen, die dem Klassenattribut jedes übereinstimmenden Elements hinzugefügt werden.

Thererfore

BackgroundColor = "Background-Red"; 
BackgroundPattern = "Pattern-2"; 
TxtColor = "Txt-Color-Green"; 

upDateTheme(); 

function upDateTheme() { 
    $('#Main').removeClass(); 
    var ClassColletion = [BackgroundColor, BackgroundPattern, TxtColor]; 
    var MainClasses = ClassColletion.join(' '); 
    $('#Main').addClass(MainClasses); 
} 

Oder in einem einzigen Ausdruck:

function upDateTheme() { 
    $('#Main').removeClass().addClass([BackgroundColor, BackgroundPattern, TxtColor].join(' ')); 
}