点击更改背景颜色 [英] Onclick change background color

问题描述

这是我的jquery代码：

  $（＃test）。click（function（）{$ b $ （$（this）.css（background-color）==＃FFFFFF）
 $（this）.css（background-color，blue）; 
 else 
 if（$（this）.css（background-color）==blue）
 $（this）.css（background-color，＃FFFFFF）; 
}）; 
  

以下是HTML：

 < div id =test> 
点击我！ 
< / div> 
  

你能向我解释为什么它不起作用吗？

非常感谢您

http：/ /jsfiddle.net/m73faf4g/

解决方案

您还忘了在 中加入 你的小提琴

更新小提琴

  $（function（）{
 $（'＃test'）。click（function（）{
 if （$（this）.css（'background-color'）=='rgb（255,255,255）'）
 $（this）.css（'background-color'，'blue'）; 
 
 if（$（this）.css（'background-color'）=='rgb（0，0，255）'）
 $（this）.css（'background-颜色'，'#FFFFFF'）; 
}）; 
}）; 
  

---

编辑

另一种方式，如果您愿意的话：

  .blue {
 background-color：blue！important; 
} 
  

  $（function（）{
 $（'＃test'）。click（function（）{
 $（this）.toggleClass（'blue' ）; 
}）; 
}）; 
  

替代小提琴

Here is my Jquery code:

$("#test").click(function() {
      if($(this).css("background-color")=="#FFFFFF") 
         $(this).css("background-color","blue");
     else
         if($(this).css("background-color")=="blue")
              $(this).css("background-color","#FFFFFF");
    });

and here is the HTML:

<div id="test">
    click me!
</div>

Can you explain to me why it does not work??

Thank you very much

http://jsfiddle.net/m73faf4g/

解决方案

You also forgot to include JQuery in your fiddle

Updated Fiddle

$(function(){
    $('#test').click(function() {
       if($(this).css('background-color') == 'rgb(255, 255, 255)')
          $(this).css('background-color', 'blue');
       else
          if($(this).css('background-color') == 'rgb(0, 0, 255)')
              $(this).css('background-color', '#FFFFFF');
    });
});

---

Edit

Alternative Way, if you wish :

.blue {
    background-color: blue !important;
}

$(function(){
    $('#test').click(function() {
        $(this).toggleClass('blue');
    });
});

Alternative Fiddle

这篇关于点击更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！