Question

我有一个ID为'#Main'的div，我正在尝试使用变量集合来更改此div的CSS类。在变量之间使用 +''+ 似乎添加类之间有很多空的空间，因此我试图在数组中使用添加所有变量并使用split属性，但到目前为止我无法这样做。

我的代码：

的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 );
}

预期的HTML结果

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

Answer 1

这里有几件事：

您无需将MainClasses对象初始化为字符串。实际上，甚至不使用那个额外的变量。只需使用ClassCollection。
执行split时，请使用逗号分隔，而不是空格。
将变量放在数组中。
使用循环来应用类名（addClass）。开箱即用不支持数组对象。

这应该让你前进：

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

来自jQuery documentation：

.addClass(className)

<强>的className ;类型：字符串;要添加到每个匹配元素的class属性的一个或多个空格分隔的类。

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

或者，在单个表达式中：

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

jQuery拆分数组中的变量值

2 个答案: