jQuery的 - 更換陣列

Question

定義了多個類

比方說，我有以下的div：

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

我希望有一個切換按鈕來更改設備。因此，這些類應該改變。但是，不僅.iphone5應該被替換，顏色.black也應該被替換。

我有以下陣列：

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

我怎樣才能讓來檢查，如果與.device類div有數組中定義的類中的一個開關，然後由下一個替換？例如：

<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。