按ID切換元素的類

Question

我試圖改變元素的類，當它從一個值A點擊到值B，然後從值B返回值A時，它被第二次單擊。我在這裏發現了一些代碼，允許我改變一次，但不是第二次。 （請參閱原始here）。

這裏是原代碼：

<script type="text/javascript"> 
    function changeClass() { 
    document.getElementById("MyElement").className += " MyClass"; 
    document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '') 
    } 
</script> 

這裏是我的代碼：

<script type="text/javascript"> 
    function changeClass() { 
    if (document.getElementByID("arrow").className == "arrowdown") { 
     document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup') 
    } 
    elseif(document.getElementByID("arrow").className == "arrowup") { 
     document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown') 
    } 
    } 
</script> 

Answer 1

$('#arrow').toggleClass('arrowup arrowdown'); 

Answer 2

爲什麼不直接使用jQuery toggleClass而是連同id selector？

$('#arrow').toggleClass('arrowup'); 
    $('#arrow').toggleClass('arrowdown'); 

並節省您自己的調試和幾行代碼！

Answer 3

入住這FIDDLE

它更容易使用jQuery ..

$(function() { 
    var i = 0; 
    $('div').on('click', function() { 
     i++; 
     if(i % 2 == 0){ 
      $(this).addClass('arrowup').removeClass('arrowdown'); 
     } 
     else{ 
      $(this).addClass('arrowdown').removeClass('arrowup'); 
     } 
    }); 
});​ 

Answer 4

只是使用jquery addClass（）和removeClass（）或者甚至更好的toggleClass點擊事件裏面

<div id="elemID" class="class1"> 
</div> 


function changeClass() 
{ 
    $("#elemID").toggleClass("class1"); 
    $("#elemID").toggleClass("class2"); 
} 

REF's

http://api.jquery.com/addClass/

個

http://api.jquery.com/removeClass/

http://api.jquery.com/toggleClass/

乾杯