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