Question

我正在尝试根据复选框的状态将图像分配给标签，但它不起作用

的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")});

标签在加载页面时仍保留第一个指定的图像。所以标签总是带有活动图像。我做错了什么？

Answer 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;}

Answer 2

我发现了问题

正如我在我的问题中所说，我正在分配像 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");

使用jquery分配背景图像

2 个答案: