Question

我的HTML div中有两个modal-footer＆amp; modal-header我希望通过单击开关更改这些颜色的背景颜色。

我从ww3schools教程here获得了切换，当我切换它时，我希望改变背景颜色。

交换机的HTML：

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

我已经尝试了类似this的内容，但它没有用。有人有解决方案吗？

Answer 1

不用括号试试：

$(".modal-header").css("background-color", "#001133");

Answer 2

这是一种非常简单的方法。我添加了一个伪切换类，当你点击它时切换。如果它没有类.on，那么给它上课（同样，改变背景颜色）。如果是，请将其删除并更改背景颜色。

$('.switch').click(function() {
    if($(this).hasClass('on')) {
        $(this).removeClass('on');
        $(".modal-header").css({"background-color", "#001133"});
        $(".modal-footer").css({"background-color", "#001133"});
    } else {
        $(this).addClass('on');
        $(".modal-header").css({"background-color", "#6699ff"});
        $(".modal-footer").css({"background-color", "#6699ff"});
    }
}

更简单的方法是让CSS为您服务：

body .modal-header,
body .modal-footer {
    background-color: #6699ff;
}

body.on .modal-header,
body.on .modal-footer {
    background-color: #001133;
}

然后，你的jQuery看起来几乎一样，用更少的行：

$('.switch').click(function() {
    if($(body).hasClass('on')) {
        $(body).removeClass('on');
    } else {
        $(body).addClass('on');
    }
}

Answer 3

你可以通过使用toggleClass来应用/删除一个改变stlyes的CSS类来进一步简化

$(document).ready(function() {
  $(".switch").click(function() {
      $(".modal-header, .modal-footer").toggleClass('active');
  });
});

.modal-header.active{
  background-color: #001133;
}
.modal-footer.active{
  background-color: #6699ff;
}

/*  Or if you want to toggle both between the two colours at the same time you could use the CSS below  */
/*
.modal-header, .modal-footer{
    background-color: #001133;
}
.modal-header.active, .modal-footer.active{
      background-color: #6699ff;
}

*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="modal-header">header</div>
<div class="modal-footer">footer</div>
<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

Answer 4

您可以使用.css() jquery函数更改background-color

$('.switch').click(function() {
    $(".modal-header").css("background-color", "red");
    $(".modal-footer").css("background-color", "yellow");
}

Answer 5

如下所示：

使用change()方法：

$('#chk').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        //alert("checked");
        $(".modal-header").css("background-color", "#001133");
    } else {
        $(".modal-header").css("background-color", "#ff0000");
    }
});

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label class="switch">
  <input type="checkbox" id="chk">
  <div class="slider round"></div>
</label>
<div class="modal-header" style="background-color:#ff0000">
qwerty
</div>

JQuery改变了两个div的CSS属性

5 个答案: