Jquery - toggleClass 不改变背景图像答案

【问题标题】：Jquery - toggleClass Not Changing Background ImageJquery - toggleClass 不改变背景图像
【发布时间】：2011-10-05 23:42:11
【问题描述】：

每个人。我搜索了这个网站和许多其他网站，以了解为什么 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("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。我更改了代码，现在一切似乎都正常了。

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

【问题讨论】：

首先：$("document") 应该是 $(document)
关键在你的CSS中，你没有透露。我的猜测是您没有正确的规则顺序或 CSS 特异性。向我们展示您的 CSS，我们可能会解决这个问题。

标签： jquery slidetoggle toggleclass

【解决方案1】：

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

可能的解决方案：

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

【讨论】：

【解决方案2】：

您添加 !important 的方法是正确的。您正在向 div 引入第二个 background-image 指令，因此您必须明确说明您希望它使用哪个指令，因此！重要。

如果你真的想要一个纯 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");

【讨论】：

我不敢说 !important 是正确的。给定两个具有完全相同特性的选择器，CSS 中更靠前的一个（或最近继承的）具有优先权。或者，您只是使“更重要”的那个具有更高的特异性。也就是说，对于 jQuery 效果 !important 可能没问题；我只是不希望这种做法渗透到主要的 CSS 中。

【解决方案3】：

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

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

【讨论】：