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");
            });
        }
    });
    });

基本上我试图让它检查我的块是否有某个类，如果没有添加它并将我的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/

Answer 2

希望这个小提琴帮助你： http://jsfiddle.net/rachit_doshi/sVZtL/8/

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

    if(!$(this).hasClass("greenDiv")) {
        $(this).addClass("greenDiv");
    } else {
        $(this).removeClass("greenDiv");
    }
});
});

Answer 3

希望这个小提琴可能对你有所帮助：http://jsfiddle.net/vishwa26/VCUvF/

$("div").click(function() {
//var $thisBtn = $(this);
if($("div").hasClass("btn-color")) {
    $("div").removeClass("btn-color");
    $(this).addClass("btn-color");
}
else {  
    $(this).addClass("btn-color");
}
 });

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

3 个答案: