單擊時更改按鈕文本，再次單擊時更改回

Question

單擊后如何更改按鈕的文字？ 並在再次單擊時將其更改回？ 我有我制作的JavaScript，並且沒有給我我想要的東西。請幫忙嗎？

    $('#addbtn').click(function (){
    if(document.getElementById('addMat').style.display == "none"){
        document.getElementById('addMat').style.display= "inline";
        $(this).val('Cancel');
    }else
        document.getElementById('addMat').style.display= "none";
        $(this).val('Add Material');
});

Answer 1

只需使用jQuery語法即可：

$('#addbtn').click(function (){
    var addMat = $('#addMat');
    if( addMat.css('display')  === 'none' ) {
      addMat.css('display','inline');
      $(this).val('Cancel');
    } else {
      addMat.css('display','none');
      $(this).val('Add Material');
    }
});

Answer 2

$('#addbtn').click(function (){
    if(document.getElementById('addMat').style.display === "none"){
        document.getElementById('addMat').style.display = "inline";
        $(this).attr("value","Cancel");
    }else{
        document.getElementById('addMat').style.display = "none";
        $(this).attr("value","Add Material");
    }
});

或更好...

$('#addbtn').click(function (){
    if( $('#addMat').css('display')  === 'none' ){
      $('#addMat').css('display','inline');
      $(this).attr("value","Cancel");
    } else {
      $('#addMat').css('display','none');
      $(this).attr("value","Add Material");
    }
});

Answer 3

$(this).prop('value', 'Cancel'); 

要么

$(this).html('Cancel');

最好的方法是創建一個按鈕，並在文本周圍放置一個span標簽

$("span", this).text("My NEW Text");