Question

我正在尝试从多元素背景图像属性中选择某个值，例如

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

使用单个jQuery表达式。

目前的解决方案是用element.css（'background-image'）替换整个属性。

我的目的是让用户循环浏览第二个url（）的一组背景图像，而其他背景图像保持不变。有没有比更换整条生产线更简单的方法？我对regexp替换不是很有信心，任何形式的帮助都会非常感激。

Answer 1

不幸的是，对多个背景图像没有很好的管理。也许有一天（也许很快）jQuery会出现一个“背景”数组或类似神奇的东西让人们忘记事情的实际工作方式，但在那之前你只需要分开,，改变网址您需要更改，然后再次加入,。

Answer 2

不，没有。即使有多个背景图像，您仍然只有一个属性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()。
找出点击了哪个按钮
在显示屏上获取当前状态
循环适当的计数器
获取新背景
使用数据和新背景更新显示状态。

使用jQuery选择并更改特定的背景图像

2 个答案: