通过单击链接更改特定Div的背景颜色

Question

你们好吗？ 好吧，我有一个问题。 我在一个名为“ section2”的div上有一个链接，我需要的是在悬停时更改Div的背景色并保持该新颜色，直到将鼠标悬停在第二个链接上时，该div的背景色就应该更改。 我不需要更改链接的背景颜色，只需要从后面动态更改div的背景颜色即可。

<script language="javascript">

$(function(){
$("#changer").on("click",function(e){
e.preventDefault();
var body = document.getElementById("section2"),
    green = "rgb(0, 128, 0)",
    white = "rgb(255, 255, 255)";

if(body.css("backgroundColor") !== green){
  body.css("backgroundColor",green);
}else{
  body.css("backgroundColor",white);
}
});
})

</script>

和HTML

<div id="section2" align="center">
    <a href="#" id="changer">Click me</a>
</div>

Answer 1

原生HTML元素没有css方法，这是jQuery之一。 因此，您的body代码应为：

var body = $("#section2"),

整个演示：

 $(function () { $("#changer").on("click", function (e) { e.preventDefault(); var body = $("#section2"), green = "rgb(0, 128, 0)", white = "rgb(255, 255, 255)"; if (body.css("backgroundColor") !== green) { body.css("backgroundColor", green); } else { body.css("backgroundColor", white); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="section2" align="center"> <a href="#" id="changer">Click me</a> </div> 

但是，比较CSS属性值作为背景色是非常不可靠的。 您最好比较/检查类：

 $("#changer").on("click", function (e) { e.preventDefault(); $("#section2").toggleClass('green white'); }); 

 .green {background-color: rgb(0, 128, 0);} .white {background-color: rgb(255, 255, 255);} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="section2" class="white" align="center"> <a href="#" id="changer">Click me</a> </div> 

Answer 2

使用JQuery引用项目，如下所示：

$(function () {
    $("#changer").on("click", function (e) {
        e.preventDefault();

        var body = $("#section2"),
            green = "rgb(0, 128, 0)",
            white = "rgb(255, 255, 255)";

        if (body.css("backgroundColor") !== green) {
            body.css("backgroundColor", green);
        } else {
            body.css("backgroundColor", white);
        }
    });
})

Answer 3

这是我的方法：

$(function () {
    $('#changer').hover(function () {
        $('#section2').css('background-color', 'yellow');
    });

    $('#reset').hover(function () {
        $('#section2').css('background-color', 'red');
    });
})

这是JSFiddle演示

Answer 4

尝试使用CSS类控制$("#section2") background-color属性：

#section2.green {
  background-color: green;
}

#section2.white {
  background-color: white;
}

因此，使用jQuery添加背景颜色：

$(function () {
    $("#changer").on("click", function (e) {
        e.preventDefault();

        var body = $("#section2");

        if (body.hasClass('green')) {
            body.removeClass('green')
              .addClass('white');
        } else {
            body.removeClass('white')
              .addClass('green');
        }
    });
})

Answer 5

经过努力，

$(function() {
    $("#changer").on("click",function(e){
        e.preventDefault();
        var body = $("#section2");
        if(body.css("background-color").indexOf("rgb(0, 128, 0)") == -1 ) {                             
            body.css("background-color","rgb(0, 128, 0)");
        }else{
          body.css("background-color","rgb(255, 255, 255)");
        }
    });
})