节点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/