選擇並更改特定的背景圖像與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

回答

相關問題