指定背景圖像使用jQuery

我試圖將圖像分配給取決於複選框的狀態標籤，但它不工作指定背景圖像使用jQuery

的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（../圖像/ inactive.png）不重複;]

無論你如何分配值

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

或

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

標籤它仍然保留第一個分配的圖像在加載頁面的時刻。所以標籤總是帶有活動圖像。我究竟做錯了什麼？

來源

2013-12-20 Maximus Decimus

什麼是'myLabel.data（「圖像1」）的值' –

我想像的問題是不正確而圖像的URL。更好的方法是將圖像放入CSS類中，然後更改類。 –

我發現這個問題

正如我所說的，我的問題，我分配這樣URL圖像的CSS （../images/active.png）不重複但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");

來源

2013-12-21 23:45:14

試試這個，

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'); 
    }

，並定義像

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

來源

2013-12-20 16:39:50 anand4tech

指定背景圖像使用jQuery

回答

相關問題