更改幾個CSS ID到類

我有一些CSS ID運行一些轉換，我希望這個轉換運行的不僅僅是一個元素...我嘗試將它們轉換爲類，但有些東西混亂了，而我不知道發生了什麼事。我的CSS的id怎麼看一個例子：如果我改變他們太更改幾個CSS ID到類

#transition {} 
#transition.flipped {} 
#transition figure {} 
#transition .front {} 
#transition .back {}

.transition {} 
.flipped {} 
.transition figure {} 
.front {} 
.back {}

我改變的JavaScript getElementbyId到getElementsByClassName。轉換不起作用，JS控制檯不顯示任何錯誤。從評論

<div class="transition"> 
    <figure class="front"> 
     <img src="img/work/0002.png"> 
    </figure> 
    <figure class="back"> 
     <img src="img/work/0007.png"> 
    </figure> 
</div>

HTML JS代碼：

var init = function() { 
    var trans = document.getElementsByClassName('transition'); 

    document.getElementsByClassName('flip').addEventListener('click', function() { 
     trans.toggleClassName('flipped'); 
    }, false); 
}; 

window.addEventListener('DOMContentLoaded', init, false);

來源

2013-05-10 Morokiane

做的任何元素都有這些類嗎？ – 2013-05-10 19:36:39

'GetElementsByClassName'應該是'getElementsByClassName'，它會返回一個數組，以便您的JS可能需要循環或通過在其後面添加'[0]'來選擇第一個項目。 – 2013-05-10 19:37:37

這可能不是這種情況，但你是否將id改爲class？ – Cam 2013-05-10 19:38:43

所以，getElementsByClassName返回數組。如果你願意，你可以遍歷該數組，但更簡單的選擇是包含jQuery。

首先，將它添加到您的HTML文件，就下來，你可以：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

然後，在包括低於單獨的腳本文件，嘗試這樣的事情：

$(document).ready(function() { 
    var trans = $('.transition'); 

    $('.flip').click(function() { 
     trans.toggleClass('flipped'); 
    }); 
});

Fiddle to demonstrate

來源

2013-05-10 20:45:30

getElementById返回單個DOM元素。

getElementsByClassName返回一個DOM元素數組。

您不能在陣列上設置事件;你需要單獨設置每個元素。

來源

2013-05-10 20:45:44 Spudley

更改幾個CSS ID到類

回答

相關問題