jquery - 使用 Jquery 将图像添加到提交输入

Question

嗨，我有以下代码

<input type="submit" name="btnCheckOut" value="Buy >>" id="btnCheckOut" />

我无法直接访问源代码，但我想在“购买”文本前添加一个图像“money.png” 。

如何使用 Jquery 做到这一点？

Answer 1

您可以通过向“提交”元素添加背景图像来使用 CSS 来实现。

submit {

    background: url('/myimage.png') no-repeat top left;
    padding: 2px 8px;
}

Answer 2

“在前面”是指在<input/>实际文本的前面还是在实际文本的前面（即在输入中）？

如果是前者，那么应该这样做：

$('input[name=btnCheckOut]').before('<img src="money.png"/>');

如果是后者，那么您应该使用 a<button>代替，因为它允许其中几乎所有元素：

$('input[name=btnCheckOut]').before(
    '<button name="btnCheckOut"><img src="money.png"/>Buy &gt;&gt;</button>'
).remove();

Answer 3

A la Aaron Huran 的解决方案，但在 JQuery 中：

$(this).css('background', "url('/myimage.png') no-repeat top left").css('padding', '2px 8px');

Answer 4

使用 before() 在输入标签之前注入你的图像。

http://api.jquery.com/before/

$('#btnCheckOut').before('<img src="money.png" id="..." />');

PS 如果您希望图像也可点击，您也必须通过绑定点击事件通过 jQuery 来管理它。