几秒钟后使用 jQuery 更改输入按钮文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1071012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to change input button text back after a few seconds
提问by Chris Bartow
I'm using a form and jQuery to make a quick change on a web site. I would like to change the button text to 'Saved!' then change it back to Update after a few seconds so the user can change the value again. Of course they can hit the now 'Saved!' button again, but it doesn't look nice.
我正在使用表单和 jQuery 在网站上进行快速更改。我想将按钮文本更改为“已保存！” 然后在几秒钟后将其更改回更新，以便用户可以再次更改该值。他们当然可以点击现在的“已保存！” 再次按钮，但它看起来不好看。
$("form.stock").submit(function(){
// Example Post
$.post($(this).attr('action'), { id: '123', stock: '1' });
$(this).find(":submit").attr('value','Saved!');
// This doesn't work, but is what I would like to do
setTimeout($(this).find(":submit").attr('value','Update'), 2000);
return false;
});
回答by SolutionYogi
First argument to setTimeout is function. So wrap your code inside an anonymous function and you are good to go.
setTimeout 的第一个参数是函数。因此，将您的代码包装在一个匿名函数中，您就可以开始使用了。
$("form.stock").submit(function(){
// Example Post
$.post($(this).attr('action'), { id: '123', stock: '1' });
var submit = $(this).find(":submit").attr('value','Saved!'); //Creating closure for setTimeout function.
setTimeout(function() { $(submit).attr('value','Update') }, 2000);
return false;
});
I am not able to test this code right now. Let me know if it doesn't work.
我现在无法测试此代码。如果它不起作用，请告诉我。
EDIT:As suggested by redsquare, it makes sense to create closure from the submit button itself.
编辑：正如 redsquare 所建议的，从提交按钮本身创建闭包是有意义的。
回答by RkaneKnight
If it's actually a "button" tag then to change it you would use.
如果它实际上是一个“按钮”标签，那么你会使用它来改变它。
$('#button_id').html('New Text');
Of course if you're preforming this onClick for that button then you could easily just pass (this) into the function as an object and $(this).html('New Text'); instead.
当然，如果您正在为该按钮执行 onClick，那么您可以轻松地将 (this) 作为对象和 $(this).html('New Text'); 传递到函数中。反而。
Hope this helps someone.
希望这可以帮助某人。
回答by tvanfosson
I would suggest, perhaps, a different (in my opinion better) interface to give feedback than changing the text of the button. You could use jGrowlor the dialogwidget to display a message via a callback from the post method.
我会建议，也许，一个不同的（在我看来更好）的界面来提供反馈而不是改变按钮的文本。您可以使用jGrowl或对话框小部件通过 post 方法的回调来显示消息。
$("form.stock").submit(function(){
$.post(
$(this).attr('action'),
{ id: '123', stock: '1' },
function() { $.jGrowl("Your update was successfully saved."); }
);
});
回答by Peter
You probably want to wrap the action in a function:
您可能希望将操作包装在一个函数中：
setTimeout(function(){$(this).find(":submit").attr('value', 'Update')}, 2000);
回答by redsquare
$("form.stock").submit(function(){
var $form = $(this);
$.post( $form.attr('action'), { id: '123', stock: '1' } );
var $submit = $form.find(":submit").attr('value','Saved!');
window.setTimeout(function() {
$submit.attr('value','Update')
}, 2000);
return false;
});
