为同一事件添加相同的事件处理程序( Ajax )--多个元素--没有正确地设置属性值--在jQuery \\ jQuery _\\_\Ajax中

Question

我有两个输入文本框，并添加了相同的键向上事件处理程序，它调用ajax请求。我想在“完全”事件上执行一些片段(启用文本框)，但它们不是独立工作的。

<input type="text" name="ele1" id="ele1">
<input type="text" name="ele2" id="ele2">

$(function() {
    let ele1 = $('#ele1');
    let ele2 = $('#ele2');
    $("#ele1, #ele2").on('keyup', resourceChange);
    function resourceChange(e) {
        $this = $(this);
        $this.prop('disabled', true);
        $.ajax({
            url: "test_upload.php",
            type: "POST",
            cache: false,
            processData: false,
            contentType: false,
            dataType: 'json',
            complete: function(xhr) {
                response = xhr.responseJSON;
                $this.prop('disabled', false);
            }
        });
    }
});

出于测试目的，我手动添加了5秒延迟。

<?php
// test_upload.php
sleep(5);
$response = [
    'success' => true,
    'name' => 'test_name'
];
header('Content-Type: application/json');
echo json_encode($response);

问题:当我在第一个文本框中输入一个字符时，它将在接下来的5秒内被禁用(倒数开始)。但是如果我在完成这5秒之前输入第二个文本框(比方说，3秒通过)，那么第一个文本框永远不会被启用。它仍然要停用。第二个文本框是在从5秒开始的剩余秒之后启用的。(5-3=2秒)

Answer 1

你应该抓住你的反应。然后决定你需要做什么。

尝尝这个。

<input type="text" name="ele1" id="ele1">
<input type="text" name="ele2" id="ele2">
<input type="text" name="ele3" id="ele3">
<input type="text" name="ele4" id="ele4">

$(function() {
        var respCount = 0;
        var selectedElem = [];
        let ele1 = $('#ele1');
        let ele2 = $('#ele2');
        let ele3 = $('#ele3');
        let ele4 = $('#ele4');

        var idx = 0;
        $("#ele1, #ele2, #ele3, #ele4").on('keyup', resourceChange);
        function resourceChange(e) {

            $this = $(this);
            selectedElem.push({id: $this[0].id});

            $this.prop('disabled', true);
            $.ajax({
                url: "test_upload.php",
                type: "POST",
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',
                complete: function(xhr) {
                    response = xhr.responseJSON;

                    $(`#${selectedElem[respCount].id}`).prop('disabled', false);

                    respCount++;

                }
            });


        }



    });

Answer 2

通过ajax发送元素并对其进行增强，尝试这个方法。

<input type="text" name="ele1" id="ele1">
<input type="text" name="ele2" id="ele2">

$(function() {
$("input").on('keyup', resourceChange);
function resourceChange(e) {
    element = $(this).attr('name');
    $(this).prop('disabled', true);
    $.ajax({
        url: "test_upload.php",
        type: "POST",
        cache: false,
        processData: false,
        contentType: false,
        data: 'element='+element,
        dataType: 'json',
        complete: function(xhr) {
            response = xhr.responseJSON;
            $('input[name="'+response.element+'"]').prop('disabled', false);
        }
    });
}
});

php

 <?php
// test_upload.php
sleep(5);
$response = [
  'success' => true,
  'name' => 'test_name',
  'element' => $_POST['element']
];
header('Content-Type: application/json');
echo json_encode($response);