如何使用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();
    }
});