無法設置作爲參數傳遞元素禮儀

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元素的元素屬性時，單擊的是爐膛。我確信代碼被執行，因爲我調試它在案例1和2中添加console.log()。它不會返回錯誤，代碼似乎可以正常工作，但沒有任何事情發生，並且再次單擊屬性act是相同的。

Answer 1

裏面$.post成功回調，this不再是你點擊（這是你需要傳遞給change什麼）的元素。您需要保存到該元件的引用$.post回調外，並用它作爲參數調用時的變化，如：

$('.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之前定義點擊對象，如下所示。

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!'); 
     } 
    } 
    ); 
});