Question

我对jQuery很陌生，而且我有一个关于使用switch改变jQuery中背景颜色的问题。基本上我已经让它改变了颜色，但是我现在想要能够根据锚点点击将身体的背景图像更改为各种不同的图像。我创造了一个小提琴来解释我已有的东西：http://tinyurl.com/oqnmqte

Answer 1

所以你可以扩展你喜欢的东西

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;
    });

Answer 2

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

Answer 3

$('html').css('backgroundColor', bg);

你有“背景”而不是正确的css风格“background-color”。

在jQuery中，所有带有“ - ”的css效果都被下一个单词中的大写所取代。

例如：

CSS：背景颜色 jQuery的：的backgroundColor

CSS：利润率左 jQuery的： marginLeft

无法在jQuery中切换背景图像

3 个答案: