できません

Question

私は、次のコード（コメントとコードを読む）を持っている：

<!-- Panel --> 
<div class="panel panel-default" num="1"> 
<!-- There was some boring stuffs --> 
<div style='float: right;'> 
    <!-- Three buttons: hearth, tic and cross --> 
    <span class="glyphicon glyphicon-heart-empty" aria-hidden="true" style="margin-right: 5px;" act="1"></span> 
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true" style="margin-right: 5px;" act="3"></span> 
    <span class="glyphicon glyphicon-ok" aria-hidden="true" style="margin-right: 5px;" act="0"></span> 
</div> 
<!-- Other boring stuffs --> 
<script> 
$('.glyphicon').click(function(){ 
    //Panel father of the button clicked 
    panel = $(this).closest('div.panel'); 
    //Action: 1 like, 2 dislike, 3 signal, 0 accept 
    act = $(this).attr('act'); 
    //Send request to the file that change it in the database. Ignore this until the change() function call 
    $.post(
     'action.php', 
     {id : panel.attr('num'), act : act}, 
     function(data) { 
      if (data == '1') { 
       //If the request is correct change DOM elements 
       //First is the father panel, second the button clicked (this is the problematic argument), and the action (1, 2, 3, 0) 
       change(panel, $(this), act); 
      } else { 
       alert('Error occurred...Please try again!'); 
      } 
     } 
    ); 
}); 
//Change DOM elements 
function change(panel, obj, act) { 
    //Switch the action 
    switch(parseInt(act)) { 
     case 1: 
      //This code is executed but those three action doesn't work. Nothing change. I think the problem is the var obj 
      obj.removeClass('glyphicon-heart-empty'); 
      obj.addClass('glyphicon-heart'); 
      obj.attr('act', '2'); 
      break; 
     case 2: 
      //Same thing here, but I haven't checked this because first the code of case 1 need to work. 
      obj.removeClass('glyphicon-heart'); 
      obj.addClass('glyphicon-heart-empty'); 
      obj.attr('act', '1'); 
      break; 
     case 3: 
      //The panel var works very well and those blocks works 
      panel.removeClass('panel-default'); 
      panel.addClass('panel-warning'); 
      break; 
     default: 
      panel.removeClass('panel-warning'); 
      panel.addClass('panel-default'); 
    } 
} 
</script> 

私はそれがいっぱいに囲炉裏をクリックしたときに、私はもう一度クリックすると、それが空を返すことをしたいです。問題は、私がobj要素の隆起をクリックして、ハースをクリックしてみようとするときです。私はコードが実行されたと確信しているので、私はconsole.log()の場合1と2を追加してデバッグしました。エラーは返されず、コードは動作するようですが、何も起こらずに再びattrをクリックします。actは同じです。

Answer 1

、thisは、もはやあなたは（あなたがchangeに渡すために必要なものである）をクリックしている要素ではありません。

が

$('.glyphicon').click(function(){ 
    var icon = $(this), 
     panel = icon.closest('div.panel'), 
     act = icon.attr('act'); 

    $.post(
     'action.php', 
     {id : panel.attr('num'), act : act}, 
     function(data) { 
      if (data == '1') { 
       change(panel, icon, act); 
      } else { 
       alert('Error occurred...Please try again!'); 
      } 
     } 
    ); 
}); 

Answer 2

コードにajaxの問題があります。あなたは以下のように、ajaxを呼び出す前にクリックオブジェクトを定義しなければなりません。 $.post成功コールバック内

var click_obj = ''; 

$('.glyphicon').click(function(){ 


click_obj = $(this); 


//Panel father of the button clicked 
panel = $(this).closest('div.panel'); 
//Action: 1 like, 2 dislike, 3 signal, 0 accept 
act = $(this).attr('act'); 
//Send request to the file that change it in the database. Ignore this until the change() function call 
$.post(
    'action.php', 
    {id : panel.attr('num'), act : act}, 
    function(data) { 
     if (data == '1') { 
      //If the request is correct change DOM elements 
      //First is the father panel, second the button clicked (this is the problematic argument), and the action (1, 2, 3, 0) 


      change(panel, click_obj, act); 


     } else { 
      alert('Error occurred...Please try again!'); 
     } 
    } 
    ); 
});