Question

我想知道是否有人可以帮忙解决这个问题。我正在尝试根据其内容更改跨度的背景图像。我花了几天谷歌搜索这个并没有能够想出任何东西。

HTML的结构如下：

<span id="foo" class="bar">
    Gallery
</span>

并且，一旦点击了跨度，它就会变为：

<span id="foo" class="bar">
    List
</span>

我已经使用jQuery go 并想出了这个：

$(window).load(function(){
    $("span#foo").each(function() {
        var $el = $(this);
        var image;
        var content = $el.text().toLowerCase();
        if (content.indexOf("gallery") !== -1) {
            image = "url(http://www.example.co.uk/images/foursquares.png) 14px 6px / 10px 10px no-repeat";
        }
        else if (content.indexOf("list") !== -1) {
            image = "url(http://www.example.co.uk/images/threelines.png) 14px 6px / 10px 10px no-repeat";
        }
        if (image) {
            console.log("if");
            .css("background", image);
        }
    }); 
});

（我已经从其他帖子中复制和编辑了作者想要更改相邻div的背景颜色，但我再也找不到它了）但它没有做任何事情。

任何人都可以提供的帮助将非常感激。

亲切的问候，

标记

Answer 1

试试这个，在if语句中添加toLowerCase（）函数，然后将“background”更改为“background-image”

$(window).load(function(){
$("span#foo").each(function() {
    var $el = $(this);
    var image;
    var content = $el.text().toLowerCase();
    if (content.toLowerCase().indexOf("gallery") !== -1) {
        image = "url(http://www.example.co.uk/images/foursquares.png) 14px 6px / 10px 10px no-repeat";
    }
    else if (content.toLowerCase().indexOf("list") !== -1) {
        image = "url(http://www.example.co.uk/images/threelines.png) 14px 6px / 10px 10px no-repeat";
    }
    if (image) {
        console.log("if");
        $el.css("background-image", image);
    }
}); 
});

Answer 2

感谢所有帮助过的人。可能由于我自己的无能，我无法得到上述答案，所以选择了一个更简单的选择......

根据跨度的内容，我决定根据内容更改HTML，而不是改变背景图像，如下所示：

$(document).ready(function() {
    $('span#foo:contains("Gallery")')
        .html('<img src="http://www.example.co.uk/images/foursquares.png"');        
    $('span#foo:contains("List")')
        .html('<img src="http://www.example.co.uk/images/threelines.png"');
})

亲切的问候，

标记

如何根据内容更改跨度的背景图像？

2 个答案: