是否有任何事件要切换元素的颜色?

时间:2016-02-03 13:43:47

标签: javascript jquery html css

我有button隐藏/显示div。我使用.toggle()来隐藏和显示该元素。现在我也需要改变那个按钮的颜色。我的意思是当元素显示时,按钮的颜色必须是红色,否则它必须是灰色

$("button").click(function(e) {
    $("div").toggle();
});
button{
  background-color: red;
}

div{
  width: 50%;
  border: 2px solid;
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button>click!</button> <br /><br />
<div>this is a test</div>

正如您在上面的代码中所看到的,button的背景颜色是红色,因为div是可见的。现在,当用户点击它并button隐藏时,我想将div的背景颜色更改为灰色。我怎么能这样做?

我可以使用这样的东西来做到这一点:

if( $(div).is(":visible") ){
     // background color of button: red
} else {
    // background color of button: gray
}

但我想知道,是否有任何事件要切换颜色?

6 个答案:

答案 0 :(得分:3)

您可以将background-color更改为gray red,反之亦然。

&#13;
&#13;
$("button").click(function(e) {
  $(this).css('background-color', $(this).css('background-color') == 'rgb(255, 0, 0)' ? 'rgb(128,128,128)' : 'rgb(255,0,0)')
  $("div").toggle();
});
&#13;
button{
  background-color: red;
}

div{
  width: 50%;
  border: 2px solid;
  padding: 20px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button>click!</button> <br /><br />
<div>this is a test</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

将按钮的颜色添加到样式类并使用.toggleClass(classname)

答案 2 :(得分:1)

没有特定事件可以切换颜色。您可以使用任何(可能是?)事件来切换颜色。至少有几种方法可以切换颜色。

您可以使用代码在按钮的单击事件处理程序中切换颜色。

$(document).on('click', '#id_of_button', function(){
    if( $('#id_of_div').is(':visible') ){
         // background color of button: red
    } else {
        // background color of button: gray
    }
})

但是,我会为背景颜色定义一个css类,而不是直接操作样式。

如Santhosh所述 - 您可以使用定义一个类并使用toggleClass

正如chipChocolate.py所提到的 - 您可以使用三元表达式来交换颜色。

您可以使用帖子中的代码来处理它。

所以,最后......

没有toggleColor事件或函数,但您可以编写一个或使用其他事件来完成任务。

答案 3 :(得分:1)

$("button").click(function(e) {
    $("div").toggle(function(){
      if($(this).is(":visible"))
        $("button").css("background-color","silver");
      else
        $("button").css("background-color","red");
    });
});
button{
  background-color: red;
}

div{
  width: 50%;
  border: 2px solid;
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button>click!</button> <br /><br />
<div>this is a test</div>

答案 4 :(得分:1)

请尝试以下代码:

&#13;
&#13;
$("button").click(function(e) {
    $(".container").toggleClass('active');
});
&#13;
.container div{
  width: 50%;
  border: 2px solid;
  padding: 20px;
}
.container div
{
  display: none;
}
button{
  background-color: gray;
}
.active button{
  background-color: red;
}
.active div
{
display: block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <button>click!</button> <br /><br />
  <div>this is a test</div>
</div>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

我们没有其他活动。您需要知道的只是HTML5事件。

您可以使用按钮上的班级来跟踪更改。