Question

我正在尝试使用jQuery更改跨度的背景图像。基本上我想继续在'arrow-down.png'和'arrow-up.png'之间切换逻辑是：

我点击了＃profile-li span
脚本检查.arrow-img span当前有哪些背景图像
如果包含'down'，则将其更改为'up'
否则将'up'更改为'down'

直到第2点。它工作正常 - 它转到'if'语句，但是当我得到警告框时，图像仍然是'arrow-down.png'。我不知道我在这里做错了什么：

 $("#profile-li").click(function () {
        var bgValue = $("#profile-li").children(".li-title").children(".arrow-img").css('background-image').toString();
        if (/down/i.test(bgValue)) {
            (bgValue).replace('down', 'up');
            alert(bgValue);
        }

        else
            $("#profile-li").children(".li-title").children(".arrow-img").css('background-image').replace('up', 'down');
    });

有人可以帮我找到并修复我的错误吗？

Answer 1

你可以试试这个（未经测试的）

$("#profile-li").click(function (){
    if($(this).children(".li-title")
              .children(".arrow-img")
              .css('background-image') == 'url(default/images/image-down.png)'){
        $(this).children(".li-title")
               .children(".arrow-img")
               .css('background-image', 'url(default/images/image-up.png)')
    }
    else{
        $(this).children(".li-title")
               .children(".arrow-img")
               .css('background-image', 'url(/default/images/image-down.png)')
    }
});

image-down.jpg和image-up.jpg是bg图像的名称。

修改

要明确，根据以下注释，您还需要包含正确的文件路径和CSS背景图像语法。改变了上面。

Answer 2

在你的函数中使用“$（this）”。如果您发布了html

，它也会有所帮助

Answer 3

toString()返回一个字符串而不是jquery对象，因此更改bgValue（字符串...）对您的页面没有影响。

我只需添加一个带有向下箭头的类，将向上箭头设置为默认背景并使用jquery的toggleClass()方法。

类似的东西（我需要看到html的确切解决方案）：

$("#profile-li").click(function () {
  $(this).toggleClass("down_arrow");
}

Answer 4

您可以随时更改它，以便在CSS中有两个类。这使您可以在将来更改箭头的外观，而不必更改脚本文件中的任何内容。

.up {
    background-image: arrow-up.jpg;
}
.down {
    background-image: arrow-down.jpg;
}

然后在JS中，您可以根据需要添加或删除该类。

$("#profile-li").click(function (){
    var arrow = $(this).children(".li-title").children(".arrow-img");
    if (arrow.hasClass("up")) {
           arrow.addClass("down").removeClass("up");
    } else {
           arrow.addClass("up").removeClass("down");
    }
});

使用jQuery更改背景图像的值

4 个答案: