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

我试图选择一个特定值从多元件背景图片属性如选择并更改特定的背景图像与jQuery

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

与单个jQuery表达式。

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

我的意图是让用户循环访问第二个url（）的一组背景图像，而其他背景图像保持不变。有没有比替换整条线更简单的方法？我对正则表达式替换不是很有信心，任何形式的帮助都将不胜感激。

来源

2012-02-04 arvidkahl

您确定要使用“否”回答吗？ ;） – Sinetheta 2012-02-04 23:23:11

不，没有。即使有多个背景图像，您仍然只有一个属性背景图像。您需要自行整理字符串值并将其传回。像下面这样的东西将会成功。

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()。
图被点击
出哪个按钮获取显示
周期相应的计数器上的当前状态
获取新的背景
更新与所述数据和新的背景图像的显示时刻的状态。

来源

2012-02-04 22:40:26 Sinetheta

不幸的是，对于多个背景图像没有很好的管理。也许有一天（可能很快），jQuery将会推出一个“背景”数组或者是一些神奇的东西，让人们忘记事物的实际工作方式，但在那之前你只需要分割,，更改需要更改的url ，然后再加入,。

来源

2012-02-04 22:37:05

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

回答

相关问题