javascript - Node js 和 jQuery/Ajax(喜欢/不喜欢)

Question

我正在从事我的练习/演奏项目(刚开始使用 jQ 和 Ajax)，问题是我无法让我的喜欢/不喜欢按钮工作(标记/取消标记在我的应用程序中调用)。

这是我的代码(还有一些 Node 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”，但新的“取消标记”按钮根本不起作用。当我点击它时什么也没有发生，它只是不会再次触发 ajax Action 。

如果你改变 Angular 色(标记到取消标记按钮)，同样的事情也会发生。

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/