AJAX不更新類

Question

我有一個簡單的HTML表，其中有一列顯示是/否選項 - 當用戶將「是」更改爲「否」或反之，則通過AJAX調用PHP腳本更新數據庫中的記錄。這一切都運行良好，但我現在喜歡它添加一個類到單擊的單選按鈕，如果PHP腳本成功或不成功。

下面是桌子的樣子：

<table> 
<thead> 
<tr> 
    <th scope="col">Description</th> 
    <th scope="col">Type</th> 
    <th scope="col">Completed</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Welcome Email</td> 
    <td>Email</td> 
    <td class=""> 
     <div class="radio" id="radio1"> 
      <label><input checked id="1" name="completed1" type="radio" value="Yes">Yes</label> 
      <label><input id="1" name="completed1" type="radio" value="No">No</label> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td>Follow Up Phone Call</td> 
    <td>Phone call</td> 
    <td class=""> 
     <div class="radio" id="radio2"> 
      <label><input id="2" name="completed2" type="radio" value="Yes">Yes</label> 
      <label><input checked id="2" name="completed2" type="radio" value="No">No</label> 
     </div> 
    </td> 
</tr> 
</tbody> 

這裏是我的腳本 - 它調用PHP頁面，成功地更新數據庫，但它不添加類的單選按鈕的div：

$(document).ready(function() { 
    $("input[type='radio']").change(function(){ 
     var recid = $(this).closest('div').attr('id'); 
     var completed = $(this).val(); 
     $.post('updateTask.php', { type: 'updateTask', recid: recid, completed: completed }, function(data) { 
     data = JSON.parse(data); 
      if (data.error) { 
       $(this).closest('div').attr('id').addClass("has-error"); 
       $("#ajaxAlert").addClass("alert alert-danger").html(data.text); 
       $("#ajaxAlert").show(); 
       return; // stop executing this function any further 
      } else { 
       $(this).closest('div').attr('id').addClass("has-success"); 
       $(this).closest('div').attr('id').removeClass("has-error"); 
       // if you want to show a success alert enable the following 
       // $("#ajaxAlert").addClass("alert alert-success").html(data.text); 
       $("#ajaxAlert").hide(); 
      } 

     }).fail(function (xhr) { 
      // no data available in this context 
      $(this).closest('div').addClass("has-error"); 
      $("#ajaxAlert").addClass("alert alert-danger"); 
      //display AJAX error details 
      $("#ajaxAlert").html(xhr.responseText); 
      $("#ajaxAlert").show(); 
     }); 
    }); 
}); 

我不確定如何定位DIV以添加課程 - 我通常會執行以下操作：

$("#storeManagerRow").addClass("success"); 

，但在這種情況下，我最多有20個單選按鈕單元格，因此無法解決單擊更新類的單選按鈕DIV的父級語法問題。

Answer 1

該語句將因爲它的範圍無效：

$(this).closest('div').addClass("has-error"); 

解決方法：

$(document).ready(function() { 
    $("input[type='radio']").change(function(){ 
    var recid = $(this).closest('div').attr('id'); 
    var completed = $(this).val(); 
    // Create a reference to $(this) here: 
    $this = $(this); 
    $.post('updateTask.php', { type: 'updateTask', recid: recid, completed: completed }, function(data) { 
     data = JSON.parse(data); 
     if (data.error) { 
     // $(this) is wrong here. It refers to the AJAX Object. 
     $this.closest('div').attr('id').addClass("has-error"); 
     $("#ajaxAlert").addClass("alert alert-danger").html(data.text); 
     $("#ajaxAlert").show(); 
     return; // stop executing this function any further 
     } else { 
     $this.closest('div').attr('id').addClass("has-success"); 
     $this.closest('div').attr('id').removeClass("has-error"); 
     // if you want to show a success alert enable the following 
     // $("#ajaxAlert").addClass("alert alert-success").html(data.text); 
     $("#ajaxAlert").hide(); 
     } 

    }).fail(function (xhr) { 
     // no data available in this context 
     // $(this) is wrong here. It refers to the AJAX Object. 
     $this.closest('div').addClass("has-error"); 
     $("#ajaxAlert").addClass("alert alert-danger"); 
     //display AJAX error details 
     $("#ajaxAlert").html(xhr.responseText); 
     $("#ajaxAlert").show(); 
    }); 
    }); 
}); 

Answer 2

保存你的元素在一個變量，因爲在您的文章功能$(this)是不一樣的像你的單選按鈕。

$(document).ready(function() { 
    $("input[type='radio']").change(function(){ 
     var recid = $(this).closest('div').attr('id'); 
     var completed = $(this).val(); 
     var el = $(this); 
     $.post('updateTask.php', { type: 'updateTask', recid: recid, completed: completed }, function(data) { 
     data = JSON.parse(data); 
      if (data.error) { 
       el.parent().addClass("has-error"); 
       el.parent().removeClass("has-success"); 
       $("#ajaxAlert").addClass("alert alert-danger").html(data.text); 
       $("#ajaxAlert").show(); 
       return; // stop executing this function any further 
      } else { 
       el.parent().addClass("has-success"); 
       el.parent().removeClass("has-error"); 
       // if you want to show a success alert enable the following 
       // $("#ajaxAlert").addClass("alert alert-success").html(data.text); 
       $("#ajaxAlert").hide(); 
      } 

     }).fail(function (xhr) { 
      // no data available in this context 
      el.parent().addClass("has-error"); 
      $("#ajaxAlert").addClass("alert alert-danger"); 
      //display AJAX error details 
      $("#ajaxAlert").html(xhr.responseText); 
      $("#ajaxAlert").show(); 
     }); 
    }); 
}); 

我想你必須刪除你的成功班，以防萬一出現錯誤？！