如何使用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

在這里檢查演示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();
    }
});