Question

好的，我现在已经尝试了将近4个小时了，它就行不通了。

我有一个链接：

<a id="togglecolor" href="#" onclick="ToggleCover();">
    Click here to toggle DIV so you can see what I did.
</a>

我有一个div：

<div id="framecover" style="position:absolute; width:97%; height:500px; z-index:100; background-color: transparent;">
</div>

我正在尝试创建一个脚本，以便链接将div的背景颜色从透明切换为红色，然后再次单击它时再返回。

这是我的代码：

$(function() {
    $('#framecover').css('backgroundColor', "transparent")
    var framecover = '#framecover'
    $("a#togglecolor").click(function(){
        if ($(framecover).css('backgroundColor') == "transparent")
        {
            $(framecover).animate({ backgroundColor: "red" }, "slow");
        }
        else
        {
            $(framecover).animate({ backgroundColor: "transparent" }, "slow");
        }
    });
});

通过我的测试，我已经能够缩小到问题所在。它在这一行：if ($(framecover).css('backgroundColor') == "transparent")

毫无疑问，他的问题是代码是错误的语法“如果framecover的背景颜色是透明的”。问题是我不知道语法是什么，我已经在互联网上搜索了两个小时寻找答案，我找不到它。

注意：我有jquery颜色插件。这段代码：$(framecover).animate({ backgroundColor: "red" }, "slow");运行正常。这是if语句给我带来的麻烦。

Answer 1

假设你希望它从透明开始（如果不是只是切换它们）：

$("a#togglecolor").toggle(function(){
     $(framecover).animate({ backgroundColor: "red" }, "slow");
}, function(){
     $(framecover).animate({ backgroundColor: "transparent" }, "slow");
});

Answer 2

首先，我尝试使用console.log($('#framecover').css('backgroundColor'))来确切了解测试点的背景颜色（可能没有）。复制它，它应该工作。

第二个选项，检查背景是否为红色，使透明背景设置成为else执行的一部分

Answer 3

你试过了吗？

if (... .css("backgroundColor") == "rgba(0 ,0 , 0, 0)") { ...

适用于Chrome，但我没有尝试过所有浏览器。

jsFiddle here。

如果声明与背景颜色

3 个答案: