Laravel 5.7 无法使用 ajax 更改输入类

Question

我希望用户在输入发票号码并按 Enter 系统检查数据库中是否此输入值已存在或未使用 ajax 并且如果该值存在则必须更改输入类

这是我的刀片代码：

 <div class="form-group">
                                <label class="col-form-label" for="inputWarning"><i class="far fa-bell"></i> Input with
                                    warning</label>
                                <input type="text" class="form-control is-warning" id="invoice_number" name="invoice_number" placeholder="Enter ...">
                            </div>

这是我的 Ajax 代码：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $("#invoice_number").keyup(function (e) {
        if (e.keyCode == 13) {
            var inv_no = $(this).val();
            $.ajax({
                type: "GET",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{url('checkInvoice')}}",
                data: {// change data to this object
                    _token : $('meta[name="csrf-token"]').attr('content'),
                    invoice_number:inv_no
                },
                dataType: "json",
                success: function(res) {
                    if(res.exists){
                        alert('true');
                        $(this).removeClass('form-control is-warning').addClass('form-control is-valid');
                    }else{
                        alert('false');
                        $(this).removeClass('form-control is-warning').addClass('form-control is-invalid');

                    }
                },
                error: function (jqXHR, exception) {

                }
            });
        }

    });
</script>

Answer 1

在success 回调（或任何回调）中，this 并不代表您认为的意思。回调发生在稍后的时间和更晚的上下文中，因此它不再引用触发事件的元素。

在发出 AJAX 请求之前将对该元素的引用捕获到变量中：

let self = this;
$.ajax({
  //...
});

然后在success 回调中使用该变量而不是this：

$(self).removeClass('form-control is-warning').addClass('form-control is-valid');