javascript - 按 ID 切换元素的类

Question

我试图将一个元素的类从一个值 A 单击时更改为值 B，然后在第二次单击时从值 B 更改回值 A。我在这里找到了一些代码，可以让我更改一次，但不能更改第二次。（见原文在这里）。

这是原始代码：

<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 选择器？

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

省去调试和几行代码！

Answer 3

检查这个小提琴

使用 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() 甚至更好地使用 click 事件中的 toggleClass

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


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

REF的

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

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

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

干杯

Answer 5

我今天遇到了类似的事情。在我的每个功能的代码中，用户会通过按下大拇指或大拇指来表达他的意见。选定的拇指图标将具有更亮的颜色，因此当用户单击拇指向上图标时，拇指向上图标将变为绿色，而拇指向下图标（如果是绿色）将变为黑色。

我使用jQuery解决了它：

$(document).ready(function () {
            $('#vote-yes-@(Model.ProductReviewId)').click(function () {
                setProductReviewHelpfulness@(Model.ProductReviewId)('true');

                $('#1vote-yes-@(Model.ProductReviewId)').toggleClass('green');
                $('#1vote-no-@(Model.ProductReviewId)').removeClass('green').addClass('black');

            });
            $('#vote-no-@(Model.ProductReviewId)').click(function () {
                setProductReviewHelpfulness@(Model.ProductReviewId)('false');

                $('#1vote-no-@(Model.ProductReviewId)').toggleClass('green');
                $('#1vote-yes-@(Model.ProductReviewId)').removeClass('green').addClass('black');

            });
        });