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

Question

我正在寻找一种方法来改变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上的任何其他人来说都不会过于狭窄。

由于

Answer 1

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

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

如果您想要自己修改类名，可以尝试使用jQuery中的.toggleClass()，.hasClass()，.addClass()和.removeClass()方法。 / p>

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

Answer 2

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

所以你有以下css：

.portlet-header {
    background-image: url(<an image>);
}

.portlet-header.collapsed {
    background-image: url(<an other one>);
}

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

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

如果您的小部件开始折叠，请先添加该类。

<强> DEMO