在jQuery中更改背景圖片onclick

Question

好的，我有一個類似http://jsfiddle.net/8vFEd/的代碼段。 我正在使用背景圖像而不是平面背景框。 在單擊任何矩形時，單擊的矩形需要更改背景圖片say（active），其余的更改為（dim）。 單擊第二個矩形后，它需要具有（活動的）免費圖像，其余的則為昏暗圖像。 基本上我只使用2個jQuery背景圖像，它們根據單擊的內容更改背景位置。 有人可以指導我如何做到這一點

一個將處於活動狀態，其余的將在單擊該特定矩形時變暗。

Answer 1

我不確定我是否完全理解您要完成的工作，但是您可以嘗試使用以下方法：

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

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

Answer 2

我會在Joseph的帖子上發表評論，但我還沒有那個特權，所以嘿。

可能值得對所有鏈接應用默認邊框為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/

Answer 3

我假設您要更改背景圖像（相同的邏輯適用於背景顏色）。 可以說，您所有的矩形都有“語言”類。

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