Question

我有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
}

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

Answer 1

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

＆＃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;

Answer 2

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

Answer 3

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

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

$(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事件或函数，但您可以编写一个或使用其他事件来完成任务。

Answer 4

$("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>

Answer 5

请尝试以下代码：

＆＃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;

Answer 6

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

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

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

6 个答案: