数组中的jQuery拆分变量值
数组中的jQuery拆分变量值
提问于 2017-12-19 15:34:17
我有一个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 );
}预期的结果
<div id="Main" class="Background-Red Pattern-2 Txt-Color-Green"> Some Content here </div>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-12-19 15:40:46
这里有几件事：
- 不需要将
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>
Stack Overflow用户
发布于 2017-12-19 15:46:14
来自jQuery文档：
.addClass(className)className；Type: String；要添加到每个匹配元素的class属性中的一个或多个空格分隔类。
因此，
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(' '));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47890310
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号