javascript - Jquery - 替换数组中定义的多个类

Question

假设我有以下 div:

<div class="device iphone5 black"></div>

我想要一个切换按钮来更改设备。因此，应更改类。但是，不仅 .iphone5应该更换，颜色.black也应该更换。

我有以下数组:

var devices = [
            '.iphone5 .black',
            '.nexus5',
            '.iphone4s .black',
            '.lumia920 .blue',
            '.s5 .white',
            '.htc-one'
        ];

我如何制作一个切换器来检查一个 div 是否带有 .device类具有数组中定义的类之一，然后用下一个替换它？像这样的东西:

<script>
$('.device').filter(devices.join())$('.device').is(devices.join("")
        .attr('class', 'device ' + devices[NEXT]);
</script>

Answer 1

遍历数组，搜索与当前选择器匹配的所有元素，并用下一个数组元素替换类。

你必须反向循环数组。否则，当你把.iphone5.black改成.nexus5后，下一次迭代会把它改成.iphone4s.black，一切就结束了到数组中的最后一个类。

for (var i = devices.length-2; i >= 0; i--) {
    $(".device" + devices[i]).attr("class", "device " + devices[i+1].replace(/\./g, ' '));
}

此外，您需要从 devices 中的值中取出空格。 .iphone5 .black 表示搜索 .iphone5 的子类为 black，但您希望这些类应用于相同的元素，所以它应该是 .iphone5.black。