javascript - Jquery Ajax 无法获取当前聚焦的输入元素

Question

我的表单有两种输入字段，1) ID 输入字段，2) 名称输入字段。我已经有一个 mysql 数据库，其中包含一个包含 ID 和名称数据的表。我想做的是，当我在 ID 的输入字段中键入一个 ID 号，当它失去焦点时，jquery 脚本将根据数据库中的 ID 号自动填充名称的输入字段。所以我的 html 输入表单是这样的:

html:

<input type='text' name='id' class='input_id'>
<input type='text' name='name' class='input_name'>
<br>
<input type='text' name='id'>
<input type='text' name='name'>

jquery 脚本:

$(document).ready(function) {
    $('.input_id').blur(function() {
        $.post('search_name.php',
        {
            id: $('.input_id').val()
        },
        function(data) {
            $('.input_name').val(data);
        });
    });
});

php (search_name.php) 代码:

<?php
$con = mysqli_connect('localhost','root','','database');
$id = $_POST['id'];
$sql = "SELECT * FROM table WHERE id='$id'";
$query = mysqli_query($con, $sql);
$result = mysqli_fetch_array($query);
$name = $result['name'];

echo $name;
mysqli_close($con);
?>

问题是一种形式，我将有 20 行 ID 和名称输入字段，如何修改我的 jquery 脚本，以便当第 1 行的 ID 输入字段失去焦点时，它只会自动填充名称输入字段在第 1 行中，第 2 行中的那个只会自动填充第 2 行中的名称输入字段，依此类推，而不是编写相同的脚本 20 次。

我尝试使用遍历方法，例如 (this) 和 (next)，但我似乎无法让它工作。我也尝试过使用 (:focus) 方法，我不确定是我用错了还是不是为了这个。

欢迎所有建议。提前致谢。

Answer 1

假设他们是 sibling ，使用 this 和 next()

$('.input_id').blur(function() {
    var inp = $(this);
    $.post('search_name.php',
    {
        id: inp.val()
    },
    function(data) {
        inp.next('.input_name').val(data);
    });
});