ノードjsとjQuery/Ajax（Like/Unlike）

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"というボタンがあります。それをクリックすると、それは私のサーバなどに投稿してください。ボタンクラスを変更して、 "UNMARK"ボタンのように動作するようにする必要があります（誤ってマークした場合、マークを外すことができます）。しかし、それだけでは機能しません、ボタンのスタイルの変更、インスペクタで私はクラスが正常に "unmark_message"に変更されていることがわかりますが、その新しい "unmark"ボタンはまったく動作していません。それをクリックすると、何も起こっていない、それは単にajaxアクションを再度引き起こさない。

ロールを変更すると、同じことが起こります（マークを解除するボタンにマークする）。

Answer 1

ここには2つの機能があります。 1つの機能はボタンをマークし、もう1つの機能はボタンをマーク解除します。

コードに問題があるのは、これらの2つの機能のいずれかが各ボタンに付いているということです。つまり、各ボタンはマークされていない（マークが付けられていなかった場合）か、マークされていない）。

各ボタンに両方の機能をアタッチし、ボタンの状態に応じて適切なハンドラを呼び出したいとします。上記の例では

$('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/