使用Jquery添加图像以提交输入

Question

您好我有以下代码

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

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

如何用Jquery做到这一点？

Answer 1

您可以通过向“submit”元素添加背景图片来使用CSS。

submit {

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

Answer 2

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

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

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

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

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

Answer 3

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 如果您希望图像也可以点击，则必须通过绑定click事件来通过jQuery管理它。