Question

我不能让这个脚本工作。我在网上搜索，找不到任何好的答案。

$( document ).ready(function() {

$("#container").click(function(){
    var color = $(this).css("background");
    if(color == "#ffffff"){
        $(this).css("background", "#e1e1e1");
    }
    else {
        $(this).css("background", "#ffffff");
    }

});

});

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<title>Document sans nom</title>
</head>

<body>

<div id="container">

    <a href="#" class="a">Start</a>

</div>

</body>

</html>

Answer 1

因为.css('background')可能不会返回您假定它返回的格式的颜色，基于浏览器它可能会返回hexa，rgb或rgba格式

$(document).ready(function () {
    $("#container").click(function () {
        $(this).css("background-color", function () {
            var color = $(this).data("background") == '#e1e1e1' ? '#ffffff' : '#e1e1e1';
            $(this).data('background', color);
            return color;
        });
    });
});

演示：Fiddle

但更简单的解决方案是使用toggleClass（），如

#container {
    background-color: #ffffff;
}
#container.toggled {
    background-color: #e1e1e1;
}

然后

$(document).ready(function () {
    $("#container").click(function () {
        $(this).toggleClass('toggled');
    });
});

演示：Fiddle

Answer 2

您需要使用.css("background-color");，但这将以rgb而非十六进制形式返回，因此您需要稍微修改一下代码。

希望这有帮助

关于jquery .css方法

2 个答案: