jquery - 单击添加/删除类以更改 div 的背景颜色

Question

我一直在尝试让一个黑色的小 div 在单击时将颜色更改为绿色，并在下次单击时将其更改回黑色。我希望它继续这样做。

不幸的是，它似乎不起作用，通过检查其他主题，我找不到答案。

我的 HTML:

<div id="block"></div>

我的CSS:

   div
    {
        width: 100px;
        height: 100px;
        background-color: black;
    }

我的 jQuery:

  $(function(){
    $("#block").click(function(){

        if($(this).hasClass("faded") == false)
        {
            $(this).css("background-color", "green", function(){
            $(this).addClass("faded");
            });
        }
        else
        {
            $(this).css("background-color", "black", function(){
                $(this).removeClass("faded");
            });
        }
    });
    });

基本上，我试图让它检查我的 block 是否具有某个类，如果没有，则添加它并将我的 css 中的背景颜色更改为绿色。如果它确实有该类(当它是绿色时就会有)，请将其删除并将我的 css 中的背景颜色更改回黑色。

JSfiddle:http://jsfiddle.net/sVZtL/

提前谢谢大家!

Answer 1

试试这个:

$(document).ready(function(){
 $('#block').on('click', function() {
  $(this).toggleClass('faded');
 });
});

并为你的褪色类设置背景颜色:绿色。

但是，根据您的 jQuery 版本，它可能无法工作。

工作中的 JSFiddle: http://jsfiddle.net/sVZtL/12/