改变背景图像onclick在jquery

好吧，我有一个片段，如http://jsfiddle.net/8vFEd/。我使用的是背景图片而非平面背景框。单击任何矩形时，单击的矩形需要将背景图像改为（活动），其余为（调暗）。一旦点击了第二个矩形，它就需要有（活动的）可用图像，其余的图像应该是暗淡的。基本上我只使用2个jQuery背景图像，并根据点击的内容改变背景位置。有人可以指导我如何做到这一点改变背景图像onclick在jquery

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

来源

2011-09-08 Mike

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

$(".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)"); 
});

来源

2011-09-08 19:02:55

我不知道我完全理解你正在试图完成的任务，但你可能会使用这个尝试：

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

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

来源

2011-09-08 18:57:50

感谢约瑟夫看起来像它仅适用于第一次迭代 – Mike

@Mike - 那是因为你解除绑定：'$（本）.unbind（“点击”）;' –

我这个评论在约瑟夫的职位，但我不没有那个特权，所以嘿。

对所有链接应用默认边框2px solid #fff（其中#fff是父级的背景）可能是值得的，所以这只是改变颜色的一种情况，这意味着链接不会移动并在他们被点击时下来（正如你可以在他的小提琴中看到的那样）。

对于添加/删除的图像，

$(".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/

来源

2011-09-08 19:02:41 Joe

感谢乔，有什么事DOM遍历错误，它看起来像只适用于第一次迭代 – Mike

改变背景图像onclick在jquery

回答

相关问题