jquery - 如何在单击时将按钮值更改为图像

Question

我有这个按钮，当我单击它时，我希望其中的文本变为图像。我现在所拥有的不起作用，有什么想法吗？

<%= submit_tag 'CREATE MYMANUAL', class: 'submit', id: "generate" %>

<script type="text/javascript">
$('#generate').on("click", function(){
    $('#generate').val("ajax-loader.gif")
});
</script>

Answer 1

你为什么不先隐藏它然后将图像插入它的位置（可能替换按钮）？如果ajax-loader不是按钮，您可以轻松制作 loaderbutton gif

$('#generate').hide().after('<img src="ajax-loader.gif" />")

编辑 - 可能是一个更好的解决方案

$('#generate').val('');//empty button text
$('#generate').css('background-image','url(ajax-loader.gif)'); //add loading gif as background image

Answer 2

那不是有效的 HTML。见这里。我相信您必须使用“图像”类型的输入，并将 src 设置为您的图像 URL。您必须删除按钮并添加和输入“图像”类型，如下所示：

$('#generate').click(function() {
  var $par = $(this).parent();
  $(this).remove();
  $parent.append("<input type='image' src='my.gif' />")
});

或者看看你是否可以即时翻转类型： $('#generate').click(function() { $(this).attr("type","image"); $(this).attr(" src","my.gif"); });

不过，不确定第二个是否可行。