Question

我正在尝试将按钮的值从“提交”更改为“正在加载...”并在处理某些代码时禁用该按钮。该过程完成后，该按钮应重置。我觉得这可以比单独使用.attr和.prop更好。任何人都可以帮助我将代码改进到最有效的形式吗？

HTML

<button class="btn btn-primary" id="button">Submit</button>

感谢大家对.attr和不同写作风格的解释，我开始觉得这可能是我发现写这篇文章最有效的方式，因为它减少了对'#button'的访问次数。

$('#button').click(function() {
    $(this).text('Loading...').prop('disabled', true);

    //process

    $(this).text('Submit').prop('disabled', false);
});

这

$('#button').click(function() {
    $(this).prop('disabled', true);
    $(this).attr('value', 'Loading...');

    //process

    $(this).attr('value', 'Submit');
    $(this).prop("disabled", false)
});

如果您不同意或有更好的写作风格，请发表评论。

Answer 1

使用.text()或.html()

$(this).text('Loading...');
$(this).html('Loading...');

Answer 2

它不是带有类型按钮的<input> - 它是一个按钮，而在HTML5按钮中，值会进入标签本身，例如<button>Value</button>。因此，尝试使用jQuery的attr来操纵它的值将不起作用，因为值是文本本身。

您需要使用的是jQuery的text()方法。

这是 working jsFiddle.

和代码本身：

$(this).text('Loading...').prop('disabled', true);

Answer 3

试试这个

$('#button').click(function() {
    $(this).prop('disabled', true);
    $(this).text('Loading...');

    //process

    $(this).text('Submit');
    $(this).prop("disabled", false)
});

阅读http://api.jquery.com/text

Answer 4

您可以将两者合并为

$(this).html("Loading...").prop("disabled", true);

禁用，更改值，重置按钮

4 个答案: