jQuery - 選擇一個子div背景圖像並修改它

我正在尋找一種方法來改變使用jQuery的div的背景圖像但只修改它，而不是完全改變它。jQuery - 選擇一個子div背景圖像並修改它

讓我解釋一下。

即時通訊使用http://jqueryui.com/demos/sortable/#portlets來顯示一些div的打開和關閉。現在，當您單擊Portlet標題時，它將打開並關閉下面的內容。

在portlet頭文件中，我有一個子div，它顯示一個箭頭（向上或向下），具體取決於內容的當前狀態。我需要通過在背景圖像的url結尾添加「-visible」來更改此子div上的背景圖像。

我甚至不知道從哪裏開始做這件事，但我在下面添加了一些代碼供您查看。

從小提琴那裏，我需要改變portlet頭部內的門戶箭頭div的背景圖像。我不能簡單地將背景圖像全部更改，但我已將其簡化爲在此處發佈。

我希望這不太適合任何其他人使用的stackoverflow。

感謝

2012-01-19 Undefined

也許我失去了一些東西，但你不能使用.css屬性修改爲選定的jQuery對象？喜歡的東西：

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

如果您想修改類名稱本身，你可以嘗試周圍亂用jQuery中的.toggleClass()，.hasClass()，.addClass()和.removeClass()方法。

我希望這可以幫助，但讓我知道如果我完全錯過了這裏的標誌！

2012-01-19 09:52:31

那是一個很大的幫助的感謝！我不知道你可以使用current_background +「-visible」，這樣一定會讓我開始 – Undefined

真棒，祝你好運！我喜歡看到人們學習，而不是僅僅爲他們重寫一切;） –

我會personnaly去使用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'); 
});

如果你的小部件開始崩潰，開始添加類。

2012-01-19 10:00:23

回答