2013-10-30 30 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)");