Выберите и измените конкретное фоновое изображение с помощью jQuery - PullRequest
Новая
       2

Выберите и измените конкретное фоновое изображение с помощью jQuery

1 голос
/ 05 февраля 2012

Я пытаюсь выбрать определенное значение из свойства многоэлементного фонового изображения, например 

background-image: url(a.jpg), url(b.jpg), url(c.jpg)

с одним выражением jQuery.

Текущее решение заключается в замене полного свойства на element.css ('background-image').

Мое намерение состоит в том, чтобы позволить пользователю циклически проходить через группу фоновых изображений для второго URL (), в то время как другие фоновые изображения остаются нетронутыми. Есть ли более простой способ, чем замена всей линии? Я не очень уверен в замене регулярных выражений, любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 05 февраля 2012

Нет, нет.Даже с несколькими фоновыми изображениями у вас все еще есть только один атрибут background-image.Вам нужно самостоятельно разобрать строковое значение и вернуть его обратно.Что-то вроде следующего поможет:

jsFiddle 

<div id="showcase"></div>
<button class="changeBG firstBG">change first bg image</button>
<button class="changeBG secondBG">change second bg image</button>
<button class="changeBG thirdBG">change third bg image</button>

var backgrounds = [
    ["url11", "url12", "url13"],
    ["url21", "url22", "url23"],
    ["url31", "url32", "url33"],
];
$('#showcase').data('currentBGs', [0,0,0]);
$('.changeBG').on('click',function(){
    var $button = $(this),
        whichButton,
        whichBGnum,
        bgLength,
        currentBGs,
        bgString,
        bg0,
        bg1,
        bg2;

    if( $button.hasClass('firstBG') ){
        whichButton = 0;
    }else if( $button.hasClass('secondBG') ){
        whichButton = 1;
    }else if( $button.hasClass('thirdBG') ){
        whichButton = 2;
    }

    currentBGs = $('#showcase').data('currentBGs');
    currentBGnum = currentBGs[whichButton];
    bgLength = backgrounds[whichButton].length;

    currentBGnum = ( currentBGnum + 1 ) % bgLength;
    currentBGs[whichButton] = currentBGnum;
    bg0 =  backgrounds[0][ currentBGs[0] ];
    bg1 =  backgrounds[1][ currentBGs[1] ];
    bg2 =  backgrounds[2][ currentBGs[2] ];
    bgString = 'url(' + bg0 + '), url(' + bg1 + '), url(' + bg2 + ')';

    $('#showcase').data('currentBGs', currentBGs)
        .css('background-image', bgString);  
});

Этот код не предназначен для оптимизации, но удобочитаем.Рисунки с примерами глупы, это просто окна браузера, которые у меня были открыты.

  • Сохраните JS-массив всех картинок.Это многомерный массив, первый уровень представляет каждую часть фона, второй уровень - каждый параметр для этого фона.
  • Запишите текущее состояние фона, здесь мы просто .data().
  • Выяснить, какая кнопка была нажата
  • Получить текущее состояние на дисплее
  • Переключить соответствующий счетчик
  • Получить новые фоны
  • Обновить состояниедисплея с данными и новыми фонами.
0 голосов
/ 05 февраля 2012

К сожалению, нет хорошего управления несколькими фоновыми изображениями. Возможно, когда-нибудь (возможно, скоро) jQuery выпустит массив «фонов» или что-то подобное, чтобы заставить людей забыть о том, как все работает на самом деле, но до этого вам нужно будет просто разделить на ,, изменить нужную вам ссылку чтобы изменить, затем снова присоединитесь к ,.

...