使用jQuery更改背景图片的值

Question

I'm trying to change the background image of a span using jQuery. Basically I want to keep switching between 'arrow-down.png' and 'arrow-up.png' The logic is:

1. I click on the #profile-li span
2. script checks what background image the .arrow-img span has currently got
3. if it contains 'down' change it to 'up'
4. else change 'up' to 'down'

Up to point 2. it works fine - it goes to the 'if' statement, but when I get the alert box the image is still 'arrow-down.png'. I have no idea what I'm doing wrong here:

 $("#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');
    });

Could someone please help me to find and fix my mistake?

Answer 1

You might try this (untested)

$("#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 and image-up.jpg are whatever the names of the bg images are named.

EDIT

To be clear, as per the comments below, you also need to include the right file path and CSS background-image syntax. Changed above.

Answer 2

make use of "$(this)" inside your function. it would also help if you posted your html

Answer 3

toString() returns a string and not a jquery object so changing bgValue (the string...) has no effect on your page.

I would simply add a class with the down-arrow, set the up-arrow as the default background and use jquery's toggleClass() method.

Something like (I´d need to see the html for an exact solution):

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

Answer 4

You could always change it up so you have two classes in the CSS. This lets you have the ability to change the look of the arrows in the future and not have to change anything in the script file.

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

Then in the JS you can just add or remove the class as you need it.

$("#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");
    }
});