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

Question

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

让我解释一下。

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

在 portlet 标头内​​，我有一个子 div，它根据内容的当前状态显示一个箭头（向上或向下）。我需要一种通过在背景图像的 url 末尾添加“-visible”来更改此子 div 上的背景图像的方法。

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

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");

如果你想修改类名本身，你可以尝试使用 .toggleClass()、.hasClass()、。 jQuery 中的 addClass() 和 .removeClass() 方法。

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

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');
});

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

演示