Question

问题是：

我有一张表格。提交时，jQuery Ajax函数将表单中的数据发送到主干。当Ajax完成时，我想要提交按钮fadeOut！我希望通过遍历DOM来访问该按钮，而不是使用ID！我不知道为什么这个区块不起作用：

$('form').submit(function(e) {
    e.preventDefault();

    $.ajax(
        {
            url: '../../ctrl_amouzesh/ajax_students_final_record_action',
            type: 'POST',

            data: $(this).serialize() ,
            success: function(data) 
            {
                $('#res').html(data);
                var temp = $(this).find('.btn');
                temp.fadeOut();
            }
        }
    )

HTML表格：

foreach($members as $member)
        {
            ?>
            <form class="form-final-record" role="form" >    

        <input type="hidden" value="<?php echo $member -> nid?>" name="nid" class="from-nid">

        <tr>
        <td><?php echo ++$i ?></td>
        <td><?php echo $member -> nid?></td>
        <td><?php echo $member -> name." ".$member -> surename?></td>
        <td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
        <td><select name="pass" class="form-control"><option value="1">Passed</option><option value="0">Failed</option></select></td>
        <td>
            <select name="absence" class="form-control">
                <option value="0" selected>No</option>
                <option value="1">Yes</option>
            </select>
        </td>
        <td>
        <button type="submit" class="btn btn-success">Submit</button>
        <button type="submit" class="btn btn-info" style="display:none">edit</button>
        </tr>
        </form>
        <?php 
    }
    ?>

这是我的浏览器看到的内容（来自Page source）

<table class="table">
        <tr>
        <th>ردیف</th>
        <th>کدملی</th>
        <th>نام و نام خانوادگی</th>
        <th>نمره نهایی</th>
        <th>وضیعت قبولی</th>
        <th>حذف ترم</th>
        <th></th>
    </tr>
                <form class="form-final-record" >    

        <input type="hidden" value="654321" name="nid" class="from-nid">

        <tr>
        <td>1</td>
        <td>654321</td>
        <td>John Jackson</td>
        <td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
        <td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
        <td>
            <select name="absence" class="form-control">
                <option value="0" selected>ندارد</option>
                <option value="1">غیبت</option>
            </select>
        </td>
        <td>
        <button type="submit" class="btn btn-success">ثبت</button>
        <button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
        </tr>
        </form>
                    <form class="form-final-record" >    

        <input type="hidden" value="6523151" name="nid" class="from-nid">

        <tr>
        <td>2</td>
        <td>6523151</td>
        <td>Bob Backson</td>
        <td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
        <td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
        <td>
            <select name="absence" class="form-control">
                <option value="0" selected>ندارد</option>
                <option value="1">غیبت</option>
            </select>
        </td>
        <td>
        <button type="submit" class="btn btn-success">ثبت</button>
        <button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
        </tr>
        </form>
                    <form class="form-final-record" >    

        <input type="hidden" value="0049887238" name="nid" class="from-nid">

        <tr>
        <td>3</td>
        <td>09213</td>
        <td>Matt Matson</td>
        <td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
        <td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
        <td>
            <select name="absence" class="form-control">
                <option value="0" selected>ندارد</option>
                <option value="1">غیبت</option>
            </select>
        </td>
        <td>
        <button type="submit" class="btn btn-success">ثبت</button>
        <button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
        </tr>
        </form>
                <tr><td colspan="5"><button type="submit" class="btn btn-success">ثبت نهایی کلاس</button></td></tr>

</table>

Answer 1

this函数中的

success不是单击的元素，而是ajax对象

$('form').submit(function(e) {
    e.preventDefault();

    var self = this;

    $.ajax({
         url: '../../ctrl_amouzesh/ajax_students_final_record_action',
         type: 'POST',
         data: $(this).serialize() ,
         success: function(data) {
            $('#res').html(data);

            $(self).find('[type="submit"]').fadeOut();
        }
    });
});

$.ajax还有一个名为context的设置，可用于在回调中设置this的值

jQuery - 到达Form的元素

1 个答案: