javascript - 如何使用 jquery 更改输入文本背景图像

Question

这是基于 select-dropdown 的占位符事件：

$('#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

在这里查看演示http://jsfiddle.net/yeyene/Kve8L/1/

为新背景创建 css 类，并使用 jqueryremoveClass和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();
    }
});

Answer 2

你必须使用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);