jQuery在数组中拆分变量值答案

【问题标题】：jQuery split variable values in arrayjQuery在数组中拆分变量值
【发布时间】：2018-06-02 02:03:09
【问题描述】：

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

我的代码：

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>

【问题讨论】：

``var ClassCollection...` 不是正确的数组。你想做的更像var ClassColletion = [BackgroundColor, BackgroundPattern, TxtColor];

标签： jquery arrays variables split

【解决方案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>

【讨论】：

friend 它在 HTML 中添加变量的名称，而不是那些变量的值。尝试拆分的原因是如果任何变量没有类，即如果 var BackgroundPattern 没有类，那么 HTML 中不应该有额外的空间。
实际上直到我的第一篇文章之后我才注意到这一点，所以你可能正在查看我的旧版本。检查我更新的帖子。它正在分配变量的值（不是变量名）。
感谢马特，这解决了问题，但我看到了一个错误。我的编辑器显示the body of for in should be wrapped in an if statement to filter unwanted properties from the prototype 的警报。请问有什么建议吗？
@kamranshah 您的数组中可能有一个 null 或未定义的元素（取决于分配给此数组的代码的其他部分中发生的情况）。我刚刚更新了我的答案，以包含一个应该解决这个问题的条件语句。有机会就去看看吧。
再一次，非常感谢朋友，不是警报消失了

【解决方案2】：

来自jQuery documentation：

.addClass(className)

类名；类型：字符串；将一个或多个空格分隔的类添加到每个匹配元素的类属性中。

因此

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

【讨论】：