Question

I am trying to select a certain value from a multi-element background-image property such as

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

with a single jQuery expression.

The current solution is to replace the complete property with element.css(‘background-image’).

My intent is to enable the user to cycle through a group of background-images for the second url(), while the other background-images stay intact. Is there an easier way than replacing the complete line? I’m not very confident with regexp-replacement, any kind of help would be greatly appreciated.

Answer 1

No there isn’t. Even with multiple background images you still only have one attribute background-image. You need to sort out the string value yourself and hand it back. Something like the following will do the trick.

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);  
});

This code is not meant to be optimized, but readable. The example pics are silly, they are just whatever browser windows I had open.

• Keep a JS array of all the pics. This is a multidimensional array, first level represents each part of the background, second level is each option for that background.
• Write down the current state of the backgrounds, here we just .data().
• Figure out which button was clicked
• Get the current state on the display
• Cycle the appropriate counter
• Get the new backgrounds
• Update the state of the display with both the data and the new backgrounds.