0

我对 jQuery 很陌生，我有一个关于在 jQuery 中使用 switch 更改背景颜色的问题。基本上我已经可以更改颜色了，但是我现在希望能够更改背景图像基于点击锚点的各种不同图像的主体。我创建了一个 js 小提琴来解释我已经拥有的内容：http: //tinyurl.com/oqnmqte

4

3 回答 3

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;
    });
于 2013-10-30T13:03:14.887 回答
0 
$('html').css("background-image", "url(/name.jpg)");
于 2013-10-30T13:01:29.220 回答
-1 
$('html').css('backgroundColor', bg);

您有“背景”而不是正确的 CSS 样式“背景颜色”。

在 jQuery 中，所有带有“-”的 css 效果都被以下单词中的大写字母替换。

前任：

CSS：背景色 jQuery：背景色

CSS：margin-left jQuery：marginLeft

于 2013-10-30T12:58:24.537 回答