jQuery - выбор дочернего фонового изображения div и внесение в него изменений

Question

Я ищу способ изменить фоновое изображение div, используя jQuery, НО только изменяя его, а не меняя его полностью.

Позвольте мне объяснить.

Я использую http://jqueryui.com/demos/sortable/#portlets, чтобы показать, какие дивы открываются и закрываются. Теперь, когда вы щелкаете заголовок портлета, он открывает и закрывает содержимое ниже.

Внутри заголовка портлета у меня есть дочерний элемент div, который показывает стрелку (вверх или вниз) в зависимости от текущего состояния содержимого. Мне нужен способ изменить фоновое изображение для этого дочернего элемента div, добавив «-visible» в конец URL для фонового изображения.

Я бы даже не знал, с чего начать, но я добавил ниже код, чтобы вы могли на него посмотреть.

http://jsfiddle.net/45jZU/

Из скрипки мне нужно изменить фоновое изображение div-стрелки-портлета внутри заголовка портлета. Я не могу просто изменить фоновое изображение все вместе, но я упростил его, чтобы опубликовать здесь.

Надеюсь, это не слишком узко, чтобы не пригодиться кому-либо еще в stackoverflow.

Спасибо

Answer 1

Я бы лично использовал классы 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');
});

Если ваши виджеты начинают сворачиваться, сначала добавьте класс.

DEMO

Answer 2

Может быть, я что-то здесь упускаю, но вы не можете использовать модификатор атрибута .css для выбранного объекта jQuery? Что-то вроде:

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

Если вы хотите изменить сами имена классов, вы можете попробовать возиться с методами .toggleClass(), .hasClass(), .addClass() и .removeClass() в jQuery.

Надеюсь, это поможет, но дайте мне знать, если я здесь полностью пропустил отметку!