jQuery – 选择子div背景图像并修改它

我正在寻找一种方法来改变div的背景图像使用jQuery BUT只修改它，而不是完全改变它。

让我解释。

我使用http://jqueryui.com/demos/sortable/#portlets来显示一些打开和关闭的div。现在，当您单击它打开的portlet标题时，它将关闭下面的内容。

在portlet标题内部，我有一个子div，它显示一个箭头（向上或向下），具体取决于内容的当前状态。我需要一种方法来改变这个子div上的背景图像，方法是在背景图像的url末尾添加“-visible”。

我甚至不知道从哪里开始这样做，但我在下面添加了一些代码供你查看。

http://jsfiddle.net/45jZU/

从那里的小提琴，我需要改变portlet头内的portlet-arrow div的背景图像。我不能简单地一起改变背景图像，但我已将其简化为在此处发布。

我希望这不是太窄，不能在stackoverflow上对其他任何人使用。

谢谢

也许我在这里遗漏了一些东西，但你不能对选定的jQuery对象使用.css属性修饰符吗？就像是：

 var current_background = $("#my-div").css("background-image"); $("#my-div").css("background-image", current_background + "-visible");

如果您希望自己修改类名，可以尝试使用.toggleClass() .hasClass() .addClass()和.removeClass()方法。

我希望这会有所帮助，但如果我完全错过了这个标记，请告诉我！

我个人会去使用css类来改变背景图像。如果您决定之后更改图像，则无需更改您的JavaScript。使用javascript来编写窗口小部件的行为，而不是视觉方面，这是一个更好的解决方案。

所以你有以下css：

 .portlet-header { background-image: url(); } .portlet-header.collapsed { background-image: url(); }

将此行添加到您的javascript以切换collapsed类：

 $(".portlet-header").click(function() { ... $(this).parent().toggleClass('collapsed'); });

如果小部件开始折叠，则最初添加该类。

DEMO