節點js和jQuery/Ajax（喜歡/不像）

Question

我正在對我的練習/播放項目（剛開始使用jQ和Ajax）和問題是，我無法讓我喜歡/不像按鈕工作（標記/不標記在我的應用程序中調用）。

這是我的代碼（一些節點JS的東西也，按鈕，我想是因爲它按預期工作，這不是問題（我可以在我的數據庫等保存「標記的東西」））：

$('a.mark_button').on('click', function(event) { //marking a topic 
     event.preventDefault(); 
     $(this).html('Unmark').removeClass('mark_button').addClass('unmark_button'); 

     $.ajax({ 
       url: '/mark', 
       type: 'POST', 
       contentType: 'application/json', 
       dataType: 'json', 
       data: JSON.stringify({ id:$(this).attr('id') }), 
       complete: function() { 
        console.log('Process completed!'); 
       }, 
       success: function() { 
        console.log('Successfully'); 
       }, 
       error: function() { 
        console.log('Failed'); 
       } 
     }); 
    }); 

    $('a.unmark_button').on('click', function(event) { //unmarking a topic 
     event.preventDefault(); 
     $(this).html('Mark').removeClass('unmark_button').addClass('mark_button'); 

     $.ajax({ 
       url: '/unmark', 
       type: 'POST', 
       contentType: 'application/json', 
       dataType: 'json', 
       data: JSON.stringify({ id: $(this).attr('id') }), 
       complete: function() { 
        console.log('Process completed'); 
       }, 
       success: function() { 
        console.log('Succesfully'); 
       }, 
       error: function() { 
        console.log('Failed'); 
       } 
     }); 
    }); 

所以在我第一次點擊它的時候，我的按鈕就起作用了，例如有按鈕「MARK」，當你點擊它時，它應該做一個ajax的東西（發佈到我的服務器等等，這很好（第一次））應該更改按鈕類，以便它可以像「UNMARK」按鈕一樣（類似於facebook /不像系統），所以如果我意外標記它，我可以取消標記。但它只是不起作用，按鈕樣式的變化，在檢查員，我可以看到，類也成功地更改爲「unmark_message」，但新的「unmark」按鈕根本不工作。當我點擊它時，什麼都沒有發生，它只是不會再次觸發ajax動作。

如果您更改角色（標記爲取消標記按鈕），則會發生相同的情況。

Answer 1

這裏有兩個功能。一個功能標記一個按鈕，另一個功能標記一個按鈕。

您的代碼存在的問題是，它只將這兩個函數中的一個附加到每個按鈕上，這意味着每個按鈕只能具有標記（如果它本來是未標記的）或未標記（如果它最初是標記的）。

您想要將兩個函數附加到每個按鈕，並根據按鈕的狀態調用相應的處理程序。

$('a.mark_button, a.unmark_button').on('click', function(e) { 
    var $target = $(e.target); 
    if ($target.hasClass('mark_button')) { 
    onMarkedButtonClick($target); 
    } else if ($target.hasClass('unmark_button')) { 
    onUnmarkedButtonClick($target); 
    } 
}); 

在上面的例子中，onMarkedButtonClick和onUnmarkedButtonClick功能會打電話給你最初寫的點擊處理程序。

這是一個JSFiddle，演示基本的標記/取消標記。

https://jsfiddle.net/reid_horton/hwkfjx6a/