禁用，更改值，重置按鈕

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

這不是一個<input>型按鈕 - 這是一個按鈕，並在HTML5按鈕，該數值超出標籤本身，例如內<button>Value</button>。因此，試圖使用jQuery的attr來操縱它的值將不起作用，因爲該值是文本本身。

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

這裏有一個working jsFiddle.

和代碼本身：

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

Answer 2

使用.text()或.html()

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

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);