Jquery-toggleClass 不更改背景图像

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（面板）将升起到浏览器屏幕中直至完全隐藏，这就是我使用 slipToggle("slow" ） 功能。

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

我让它工作的唯一方法是进入我的 CSS 文件，并将 !important 放在“smallbox”CSS 类的背景图像的末尾，但我想知道实现这种效果的正确 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 本身添加到指定的背景图像中，而不是将新类附加到#BUTTON。我更改了代码，现在一切似乎都正常工作。

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

Answer 1

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

可能的解决方案：

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

Answer 2

您添加 !important 的方法是正确的。您正在向 div 引入第二个背景图像指令，因此您必须明确您希望它使用哪一个，因此 !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) }