javascript - 通过单击链接更改特定 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>