无法在 jQuery 中切换背景图像答案

【问题标题】：Unable to switch background image in jQuery无法在 jQuery 中切换背景图像
【发布时间】：2013-10-30 12:47:45
【问题描述】：

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

【问题讨论】：

你的问题是你想扩展你的功能来改变背景图像。或者改为更改背景图片？
@DominicGreen 我想改为更改背景图像，我可以操纵我拥有的东西还是需要重新编写整个函数？
不，您可以使用您已经拥有的内容，请参阅下面的答案，但您可能需要考虑重写并通过标记而不是数字传递图像 url。那么你就不需要 switch 语句了。
谢谢，我会看看从标记中提取图像
没有可能我在我的回答中放了一个简单的例子，因为它仍然适用于图像和颜色

标签： jquery html css switch-statement

【解决方案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;
    });

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

例如：

CSS：背景颜色 jQuery：背景颜色

CSS：左边距 jQuery：左边距

【讨论】：

问题是如何改变背景图片而不是颜色