Назначьте фоновое изображение с помощью jquery

Question

Назначьте фоновое изображение с помощью jquery

0

Я пытаюсь присвоить изображение ярлыку в зависимости от статуса флажка, но он не работает

Javascript

        var myLabel = $('[id$=lbl]');
        var myCheckBox = $('[id$=chk]');
        if (myCheckBox.prop('checked'))
        {
            //myLabel.css('background-image', myLabel.data("image1"));
            myLabel.css({backgroundImage : myLabel.data("image1")});
            alert(myLabel.data("image1"));
        }
        else
        {
            myLabel.css({backgroundImage : myLabel.data("image2")});
            alert(myLabel.data("image2"))
        }
        alert(myLabel.css('background-image'));

Состояние флажка работает хорошо (true или false). Предупреждения с myLabel.data("image1") и myLabel.data("image2") возвращают URL-адрес изображений [url (../images/active.png) ) no-repeat; и url (../images/inactive.png) no-repeat;]

независимо от того, как вы назначаете значение

            myLabel.css('background-image', myLabel.data("image1"));

или

            myLabel.css({backgroundImage : myLabel.data("image1")});

метка все еще сохраняет первое присвоенное изображение в момент загрузки страницы. Поэтому ярлык всегда имеет активный образ. Что я делаю не так?

Maximus Decimus 20 дек. 2013, в 17:52

Источник

1

каково значение myLabel.data("image1")
Arun P Johny 20 дек. 2013, в 16:31
1

Я предполагаю, что проблема в том, что URL изображений неверен. Лучший способ - поместить изображения в классы CSS, а затем просто изменить класс.
Rory McCrossan 20 дек. 2013, в 16:32

Теги:

jquery

asp.net

background-image

2 ответа

1

попробуй это,

   var myLabel = $('[id$=lbl]');
    var myCheckBox = $('[id$=chk]');
    if (myCheckBox.prop('checked'))
    {


        myLabel.removeClass('active')
        myLabel.addClass('inactive');

    }
    else
    {
        myLabel.removeClass('inactive')
        myLabel.addClass('active');
    }

и определите css как

.active{background-image:url(../images/active.png) no-repeat; }
.inactive{background-image:url(../images/inactive.png) no-repeat;}

Anand Jha 20 дек. 2013, в 15:35

Ещё вопросы

Я предполагаю, что проблема в том, что URL изображений неверен. Лучший способ - поместить изображения в классы CSS, а затем просто изменить класс.

Maximus Decimus · Accepted Answer · 2013-12-21T20-57-00.000Z

Я нашел проблему

Как я уже сказал в своем вопросе, я присваивал изображение, подобное этому url (../images/active.png) no-repeat, но свойство css было неправильным. Вместо использования backgroundImage или background-image, наконец, я использовал "фон" и период. проблема "без повтора" вызывала проблему.

myLabel.data("image1") = "url('../images/active.png') no repeat;";
myLabel.css("background" : myLabel.data("image1"));

Или вы можете это сделать, если хотите использовать свойство background-image.

myLabel.data("image1") = "url('../images/active.png')";
myLabel.css("background-image" : myLabel.data("image1"));
myLabel.css("background-repeat" : "no-repeat");