根据包含多个项目的数据属性创建类

Question

有点难以称号，抱歉。

我有一个叫做颜色的数据。例如<div class="square" data-colors="opt1, opt2, opt4">

我想获取此属性并将其拆分为3个不同的类。所以我留下了像.opt1 .opt2 .opt3

这样的东西

我不小心达到了这一点：

var colors = $('.square.active').data('colors'),
    splitColors = colors.split(',');

      console.log(splitColors);

返回我的颜色数组：

["opt1", " opt2", " opt4"]

我不确定这是做正确事情的正确方法，我觉得我可能会为自己做更多工作。有更简单的方法吗？或者我应该继续这样吗？如果是这样，我如何获得数组中的每个项目并将其转换为可用的类？

我在这里有一个例子，你可以在控制台中看到结果： https://jsfiddle.net/7z972udn/

单击一个正方形，按下按钮，返回指定了该正方形颜色的数组。

单击该按钮，我想从数组中的项目中删除隐藏的类。我认为最终结果是这样的：$('.opt1, .opt2, .opt3').removeClass('hidden');

我只是不确定如何从我所处的位置到达那一点。

Answer 1

如果你要坚持下去

您可以将句点（。）添加为前缀

<div class="square" data-colors=".opt1, .opt2, .opt4">

然后分开你正在做的方式

var colors = $('.square.active').data('colors');
splitColors = colors.split(',');

然后使用join()函数

将分裂颜色数组转换为单个字符串

splitColorString = splitColors.join();

这将生成字符串

 '.opt1, .opt2, .opt3'

然后执行jquery remove class thing

$(splitColorString).removeClass('hidden');