我正在尝试为我的网站创建版本选择器。我想包括两个选项 - 颜色选择器和文本对齐选择器。
当单击特定选项时,它应该将类应用于稍后在 CSS 中设置样式的正文。
这是它的代码:
HTML:
<div id="picker">
<ul id="colors">
<li id="version-6" class="choose-color">version 6</li>
<li id="version-5" class="choose-color">version 5</li>
</ul>
<ul id="align">
<li id="text-to-center" class="choose-align">text-center</li>
<li id="text-to-left" class="choose-align">text-left</li>
</ul>
</div>
JS:
$('.choose-color').on('click', function(){
var switchTo = $(this).attr('id')
var arrClasses = [];
$('[class*="version-"]').removeClass(function () {
console.log(this.className);
var className = this.className.match(/version-\d+/);
if (className) {
arrClasses.push(className[0])
return className[0];
}
}).addClass(switchTo);
});
$('.choose-align').on('click', function(){
var switchTo2 = $(this).attr('id')
var arrClasses2 = [];
$('[class*="text-to-"]').removeClass(function () {
var className2 = this.className.match(/text-to-\d+/);
if (className2) {
arrClasses2.push(className2[0])
console.log(className2[0])
return className2[0];
}
}).addClass(switchTo2);
});
第一段 js 代码(颜色选择器)效果很好 - 它删除任何以“version-”开头的类,然后添加等于所单击元素的 ID 的类。
我尝试使用第二段代码重新创建此行为,但没有成功。
它只是添加了该类,但没有删除以前的类。
是某个地方有错别字还是整个想法都是错误的?
最佳答案
您的问题是第二个中的正则表达式:
var className2 = this.className.match(/text-to-\d+/);
\d
匹配数字。将其更改为 .
(匹配任何字符)
关于javascript - 动态改变元素的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41991579/