Изменение значения background-image с помощью jQuery

Question

Я пытаюсь изменить фоновое изображение диапазона, используя jQuery.По сути, я хочу продолжать переключаться между «arrow-down.png» и «arrow-up.png». Логика такова:

1. Я нажимаю на # profile-li span
2. скрипт проверяет, какое фоновое изображение в настоящее время имеет диапазон .arrow-img
3. , если он содержит «вниз», измените его на «вверх»
4. в противном случае измените «вверх» на «вниз»

До пункта 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

Вы всегда можете изменить его, чтобы у вас было два класса в 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");
    }
});

Answer 2

используйте "$ (this)" внутри вашей функции.это также поможет, если вы разместили свой HTML

Answer 3

toString() возвращает строку, а не объект jquery, поэтому изменение bgValue (строка ...) не повлияет на вашу страницу.

Я бы просто добавил класс со стрелкой вниз, установил стрелку вверх в качестве фона по умолчанию и использовал бы метод jquery toggleClass().

Что-то вроде (мне нужно посмотреть HTML-код для точного решения):

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

Answer 4

Вы можете попробовать это (не проверено)

$("#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.Изменено выше.