jQuery - Избиране на дъщерно фоново изображение на div и коригирането му

Търся начин да променя фоновото изображение на div с помощта на jQuery, НО само да го променя, а не да го променя напълно.

Нека обясня.

Използвам http://jqueryui.com/demos/sortable/#portlets, за да покажа някои div които се отварят и затварят. Сега, когато щракнете върху заглавката на портлета, той отваря и затваря съдържанието по-долу.

Вътре в заглавката на портлета имам дъщерен div, който показва стрелка (нагоре или надолу) в зависимост от текущото състояние на съдържанието. Имам нужда от начин за промяна на фоновото изображение на този дъщерен div чрез добавяне на "-visible" в края на url за фоновото изображение.

Дори не знам откъде да започна да правя това, но добавих код по-долу, който можете да разгледате.

http://jsfiddle.net/45jZU/

От цигулката там трябва да променя фоновото изображение на div на стрелката на портлета вътре в заглавката на портлета. Не мога просто да променя цялото фоново изображение, но го опростих, за да го публикувам тук.

Надявам се, че това не е твърде тясно, за да не бъде полезно за никой друг в stackoverflow.

Благодаря


javascript jquery syntax portlet
person Undefined    schedule 19.01.2012    source източник

Отговори (2)


arrow_upward
0
arrow_downward

Може би пропускам нещо тук, но не можете ли да използвате модификатора на атрибута .css за избрания jQuery обект? Нещо като:

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

Ако искате да промените самите имена на класове, можете да опитате да се забърквате с методите .toggleClass(), .hasClass(), .addClass() и .removeClass() в jQuery.

Надявам се това да помогне, но ме уведомете, ако съм пропуснал целта тук напълно!

person Chris Kempen    schedule 19.01.2012
comment
Това е голяма помощ, благодаря! Не знаех, че можете да използвате current_background + -visible, така че това определено ще ме накара да започна - person Undefined; 19.01.2012
comment
Страхотно, успех! Харесва ми да виждам как хората учат, вместо аз просто да пренаписвам всичко вместо тях ;) - person Chris Kempen; 19.01.2012

arrow_upward
0
arrow_downward

Аз лично бих използвал 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');
});

Ако вашите джаджи започнат свити, първоначално добавете класа.

ДЕМО

person Didier Ghys    schedule 19.01.2012