javascript - 如何制作一个简单的 jQuery 按钮来切换元素的背景

Question

我知道它可能不会比这更简单，但嘿我是新手。我只想将 bgtoggle 类用作状态按钮的简单更改，它会更改 metro 类的背景颜色。我知道我使用了错误的方法，因为我正在尝试的方法不起作用。非常感谢任何帮助!提前致谢。

HTML:

<div class="bgtoggle">
</div>

CSS:

.bgtoggle{
    position: absolute;
    width: 56px;
    height: 43px;
    right:65px;
    top:170px;
    color:#fff;
    font-size: 3em;
    cursor:pointer;
    z-index:9999;
    background-image: url("../images/mthc/bgtoggle.png");
    background-size: 100%;
}

.bgtoggle:hover{
    background-image: url("../images/mthc/bgtoggle2.png");
}

我对 jQuery 进行了这种尝试，当然没有按预期进行:

$('.bgtoggle').toggle(function () {
    $(".metro").css('background', '#000');
}, function () {
    $(".metro")css('background', '#fff'));
}

Answer 1

我已经根据你的CSS创建了一个按钮(除了我没有的背景图片)并让它改变了主体的背景颜色，以便为你提供非常直观的效果。我知道你可以接受它并以任何你喜欢的方式应用它。需要注意的一件事，我在这里使用的是最新的 jQuery 版本，这意味着您需要使用 jQuery 而不是 $，如果您想使用，可以将其改回较早的版本。

jsFiddle_1

HTML

<div class="bgtoggle"></div>

jQuery

jQuery(document).ready(function(){
    jQuery(".bgtoggle").click(function () {
        jQuery("body").toggleClass("bgcolor--yellow");
    });
});

CSS

body {
    /* set the background to whatever you like, I made it white in color */
    background-color: white;
}

.bgcolor--yellow {
    background-color: yellow;
}

我注意到您一开始有一些语法错误(如果您是初学者，这很正常，没什么大不了的)。例如不检查文件(网页)是否准备就绪。我还考虑过，如果您想要一个按钮，您将需要一个点击事件来表示按钮功能。

如果您真的想通过悬停来实现这一点，请改用 mouseover/mouseout:

jsFiddle_2

jQuery(document).ready(function(){
    jQuery(".bgtoggle").mouseover(function () {
        jQuery("body").css("background-color", "yellow");
    });
    jQuery(".bgtoggle").mouseout(function () {
        jQuery("body").css("background-color", "white");
    });
});