在jquery中更改背景图像onclick答案

【问题标题】：change background images onclick in jquery在jquery中更改背景图像onclick
【发布时间】：2011-09-08 18:53:06
【问题描述】：

好的，我有一个像 http://jsfiddle.net/8vFEd/ 这样的 sn-p。我正在使用背景图像而不是平面背景框。单击任何矩形时，单击的矩形需要将背景图像更改为（活动），其余更改为（暗淡）。单击第二个矩形后，它需要具有（活动的）免费图像，其余的则为暗淡的图像。基本上我只使用 2 个 jquery 背景图像，它们会根据点击的内容改变背景位置。有人可以指导我如何做到这一点

一个将是活动的广告，其余的将在点击该特定矩形时变暗。

【问题讨论】：

标签： javascript jquery css function onclick

【解决方案1】：

我假设您想要更改背景图像（同样的逻辑适用于背景颜色）。可以说，您所有的矩形都有“语言”类。

$(".language").click(function () {
   // Dim out all the rectangles
   $(".language").css("background-image", "url(/dim.jpg)");

   // Make currently clicked rectangle active
   $(this).css("background-image", "url(/active.jpg)");
});

【讨论】：

【解决方案2】：

我不确定我是否完全理解您要完成的工作，但您可以尝试使用此功能：

$(this).css("border","2px solid red")
       .parent().siblings().find('a')
       .css('border', 0);

http://jsfiddle.net/8vFEd/23/

【讨论】：

谢谢 Joseph，看起来它只适用于第一次迭代
@Mike - 那是因为你要解除绑定：$(this).unbind("click");

【解决方案3】：

我会在 Joseph 的帖子上发表评论，但我还没有这个特权，所以嘿。

可能值得为所有链接应用默认边框2px solid #fff（其中#fff 是父级的背景），所以这只是改变颜色的情况，这意味着不会有问题链接在被点击时上下移动（你可以在他的 Fiddle 中看到）。

对于添加/删除图像，

$(".prop a").click(function() {
    // Give this the green background image
    $(this).css({ "border-color": "#f00", "background-image": "url('http://colourlovers.com.s3.amazonaws.com/images/patterns/113/113140.png')" })
    .parent().siblings().find('a')
    // Give all the others the red background image
    .css({ 'border-color': '#fff', 'background-image': "url('http://colourlovers.com.s3.amazonaws.com/images/patterns/155/155260.png')" });
});

快速简单的修复，来自他的代码：http://jsfiddle.net/bwfFL/1/

【讨论】：

谢谢 Joe，DOM 遍历有问题吗，好像只对第一次迭代有效