2013-10-30 68 views
0

背景圖片我「米相當新的jQuery和我一直在使用開關來改變在jQuery的背景顏色有關的問題。基本上,我找到了工作,改變顏色,但是我現在想爲了能夠改變身體基於錨的點擊各種不同的圖像的背景圖像,我創建了一個JS小提琴解釋什麼,我已經有了:http://tinyurl.com/oqnmqte無法切換jQuery中

+0

所以你的問題是你想擴展你的功能,以改變背景圖像。或者改爲改變背景圖片? –

+0

@DominicGreen我想,而不是更改背景圖片,我可以操縱我有什麼或做我需要重新寫全功能? –

+0

娜,你可以使用你已經有看到我的回答波紋管,但你可能要考慮rewritting和標記,而不是一個號碼通過傳遞圖像URL。那麼你不需要switch語句。 –

回答

2

這樣可以延長你有什麼這樣

http://jsfiddle.net/q7Cpn/2/

function changeBg(currentItem) { 
    var bg = 'null'; 
    switch (+currentItem) { 
     case 1 : 
      bg = '#FFFFFF'; 
      break; 
     case 2 : 
      bg = '#FF6000'; 
      break; 
     case 3 : 
      bg = "url('http://www.fascinatingpics.com/wp-content/uploads/2013/10/Google-Logo.png')" 
      break; 
    } 
    $('html').css('background', bg); 
} 

$('#colour-changer li a').bind('click', function() { 
    changeBg(this.id); 
    return false; 
}); 

稍微更具擴展性的解決辦法是通過從標記,這將意味着你將不再需要一個開關來傳遞數據。我在這裏舉了一個快速例子。 http://jsfiddle.net/q7Cpn/7/

<ul id="colour-changer"> 
     <li><a id="1" class="white" data-bg="#FFFFFF" href="#">White</a></li> 
     <li><a id="2" class="grey" data-bg="#FF6000" href="#">Orange</a></li> 
     <li><a id="3" class="grey" data-bg="http://www.fascinatingpics.com/wp-content/uploads/2013/10/Google-Logo.png" href="#">Orange</a></li> 
    </ul> 

function changeBg(currentItem) { 
     var bg = ""; 

     if (/(jpg|gif|png|JPG|GIF|PNG|JPEG|jpeg)$/.test(currentItem)){ 
      bg = "url('"+currentItem+"')"; 
     }else{ 
      bg = currentItem; 
     } 
     $('html').css('background', bg); 
    } 

    $('#colour-changer li a').bind('click', function() { 
     changeBg($(this).attr("data-bg")); 
     return false; 
    }); 
-1
$('html').css('backgroundColor', bg); 

你有「背景」在代替正確的CSS樣式的「背景色」的

在jQuery中有一個所有CSS效果 - 它是由t中的資本代替'他接着說。

例:

CSS: 背景色 的jQuery: 的backgroundColor

CSS: 利潤率左 的jQuery: marginLeft

+0

問題是如何更改背景圖像不是顏色 –

0
$('html').css("background-image", "url(/name.jpg)");