如何改變輸入文字的底色圖像與jQuery

Question

這裏的基礎上選擇，下拉式選單，佔位事件：

$('#A').change(function() { 
    var k = $(this).val(); 
    if (k == 1) { 
     $("#B_input-text").attr("placeholder", "this").placeholder(); 
    }else if (k == 2) { 
     $("#B_input-text").attr("placeholder", "this too").placeholder(); 

這改變了基於一些#B選擇菜單上的佔位符。 我的問題是，我如何使這些變化backround-image？

請注意，這不是一個div，而是一個輸入文本標籤。

Answer 1

您必須使用css函數。

$("#B_input-text") 
.attr("placeholder", "this") 
.placeholder() 
.css('backgroundImage', 'url("path/to/image/here")'); 

---

$("#B_input-text") 
.attr("placeholder", "this too") 
.placeholder() 
.css('backgroundImage', 'url("path/to/image/here")'); 

---

你只需要傳遞一個對象，具有所需的CSS性的判定它吧。

var backgroundCss = { 
    'backgroundImage': 'url("path/to/image/here")', 
    'backgroundRepeat': 'no-repeat', 
    'backgroundPosition': '50% 50%', 
    }; 
$("#B_input-text").css(backgroundCss); 

Answer 2

入住這裏DEMO http://jsfiddle.net/yeyene/Kve8L/1/

創建新的背景CSS類，並使用jquery removeClass和addClass

您可以在類中的任何其他屬性添加。

$('#A').change(function() { 
    var k = $(this).val(); 
    if (k == 1) { 
     $("input#B_input-text") 
      .removeClass('old_bg').addClass('new_bg') 
      .attr("placeholder", "I am blue background image and other background properties").placeholder(); 

    } else if (k == 2) { 
     $("input#B_input-text") 
      .removeClass('new_bg').addClass('old_bg') 
      .attr("placeholder", "this too").placeholder(); 
    } 
});