Node 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 的东西（将它发布到我的服务器等，这很好（第一次)) 它还应该更改按钮类，使其行为类似于“取消标记”按钮（类似于 facebook like/unlike 系统），因此如果我不小心标记了它，我可以取消标记它。但它只是不起作用，按钮样式发生变化，在检查器中我可以看到该类也成功更改为“unmark_message”，但是那个新的“取消标记”按钮根本不起作用。当我单击它时，什么都没有发生，它只是不会再次触发 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/