jQuery在数组中拆分变量值

Posted 2023-05-09

【中文标题】jQuery在数组中拆分变量值

【英文标题】：jQuery split variable values in array

【发布时间】：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];

【参考方案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(' '));