2

我一直在尝试让一个黑色的 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/

提前谢谢各位！

4

3 回答 3

3

试试这个：

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

并为您的褪色课程添加背景颜色：绿色。

但是，根据您的 jQuery 版本，它可能不起作用。

工作 JSFiddle：http: //jsfiddle.net/sVZtL/12/

于 2013-06-21T10:47:41.183 回答
1

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

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

    if(!$(this).hasClass("greenDiv")) {
        $(this).addClass("greenDiv");
    } else {
        $(this).removeClass("greenDiv");
    }
});
});
于 2013-06-21T10:55:54.590 回答
1

希望这个小提琴可以帮助你一点：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");
}
 });
于 2013-10-05T15:11:12.700 回答