Question

我有一个简单的HTML表，其中一列显示Yes / No选项 - 当用户将Yes更改为No或反之时，它通过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

将元素保存在变量中，因为post函数中的$(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();
        });
     }); 
});

我认为你必须在发生错误时删除你的成功课程？！

AJAX不更新类

2 个答案: