jquery - 使用 jQuery 选择和更改特定的背景图像

Question

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

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

使用单个 jQuery 表达式。

目前的解决方案是用element.css('background-image')替换完整的属性。

我的目的是使用户能够为第二个 url() 循环浏览一组背景图像，而其他背景图像保持不变。有没有比更换整条线更简单的方法？我对正则表达式替换不是很有信心，非常感谢任何形式的帮助。

Answer 1

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