jquery - toggleClass不更改背景图片

每个人。我搜索了这个网站和其他许多人来理解toggleClass函数为什么不能在我的Jquery代码中工作，尽管我已经找到了几种不同的解释，但它们并不符合我想要的效果。jquery - toggleClass不更改背景图片

我对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，而不是追加新类＃键。我改变了代码，现在一切似乎都正常。

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

来源

2011-10-05 user981352

首先：$（“document”）应该是$（文档） – Candide

关键在于你没有透露的CSS。我的猜测是你没有规则的顺序或CSS特异性是正确的。向我们展示你的CSS，我们可以解决这个问题。 – jfriend00

您添加！重要的方法是正确的。您正在向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");

来源

2011-10-05 23:51:56 lynks

我会毫不犹豫地说，重要的是正确的。给定两个具有完全相同特征的选择器，CSS中的更进一步（或最近继承）优先。或者，你只是让“更重要”的人具有更高的特异性。这就是说，对于jQuery效果！重要的可能是好的;我只是不希望这种做法流入主要的CSS。 –

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

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

来源

2011-10-06 00:11:10

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

可能的解决方案：

使用JS在飞行中加载图像（见this SO接听）
确保图像是通过将Arrow_Down.jpg图像中的另一个元素的背景加载页面加载并使用display: none隐藏它。然后你可以使用JS来添加和删除一个类。 Codepen

来源

2016-03-18 16:21:55

jquery - toggleClass不更改背景图片

回答

相关问题