Question

大家。我搜索了这个网站和其他许多人，以了解为什么toggleClass函数不能在我的Jquery代码中工作，虽然我找到了几个不同的解释，但它们与我想要的效果不符。

我对Jquery很新，因此我不确定Jquery函数。这是我的Jquery代码：

$("document").ready(function(){
   $("div#btn-slide").click(function(){
      $("div#panel").slideToggle("slow");
      $("div#btn-slide").toggleClass("smallbox");
   });
});

这是我的HTML代码。

<div id="panel">
</div>

<div id="btn-slide">
</div>

我在这里寻找的效果非常简单。当点击较小的div（btn-slide）时，较大的div（面板），在较小的div之上，将升高到浏览器屏幕直到完全隐藏，这就是为什么我使用slideToggle（“慢”））功能。

然后我想做的最后一件事就是让较小的div（btn-slide）改变它的背景图像。这就是我使用toggleClass（“smallbox”）的原因。 smallbox类位于我的CSS文件中，其背景图像中有一个向下箭头。这是我想要在较小的div（btn-slide）中显示的图像，当较大的div（面板）滑入其隐藏的位置时。

我实现这一点的唯一方法是进入我的CSS文件，并将！important放在'smallbox'CSS类的background-image的末尾，但我想知道正确的Jquery技术为了这个效果。

注意：我希望能够点击较小的div（btn-slide），并在每次单击时将背景图像更改为相应的箭头。

如何实现此效果？

谢谢！

更新：我非常感谢您的所有回复。好吧，你的所有回复都让我思考，所以我再次审查了toggleClass函数，我相信我已经让代码正常工作了。这是我的CSS代码。

#PANEL {
        width: 240px;
        height: 320px;
        background-color: #000000;
        margin: 0px auto;
    }

    #BUTTON {
        width: 100px;
        height: 50px;
        background-image:url(Arrow_Up.jpg);
        background-repeat: no-repeat;
        margin: 0px auto;
    }

    #BUTTON.GoUp {
        background-image:url(Arrow_Down.jpg);
    }

现在，我的错误显然是我正在添加类.GoUp本身使用指定的background-image而不是将新类添加到#BUTTON。我改变了代码，现在一切似乎都正常。

再次感谢大家的快速回复！

Answer 1

问题是当你的css加载时，DOM只加载Arrow_Up.jpg图像。它没有加载Arrow_Down.jpg。 CSS无法动态加载图片。

可能的解决方案：

使用JS动态加载图像（参见this SO回答）
通过将Arrow_Down.jpg图像放在另一个元素的背景中并使用display: none隐藏图像，确保在页面加载时加载图像。然后你可以使用JS来添加和删除一个类。 Codepen

Answer 2

添加！重要的方法是正确的。你正在为div引入第二个background-image指令，所以你必须明确你想要它使用哪一个，因此！important。

如果你真的想要一个纯粹的jQuery解决方案，你可以切换两个后台类，这样一次只有一个是活动的（不是一个好的解决方案，因为现在你必须将所有其他的css指令复制到这两个类中，这总是一个坏兆头）

或者您可以使用css函数切换背景，例如;

if($("div#btn-slide").css("background-image") == "uparrow.jpg") {
   $("div#btn-slide").css("background-image", "downarrow.jpg");
}
else $("div#btn-slide").css("background-image", "uparrow.jpg");

Answer 3

你可以发布你的CSS吗？您实际上并不需要使用！important，但您需要确保'smallbox'类选择器比'btn-slide'ID更具体。例如，在CSS文件中：

#btn-slide { background: url(oldimage.png) }
#btn-slide.smallbox { background: url(newimage.png) }

Jquery - toggleClass不改变背景图像

3 个答案: