JavaScript 选择器：如何找到下一个输入字段

Question

阅读选择器后，我尝试将函数应用于下一个输入字段...但它不起作用。要么我没有理解使用过的选择器，要么我理解了功能词“this”的错误。

<table class="example" id="example">
<tr> <!-- rows are dynamically added -->
<td><input type="text" name="number" class="number"></td> 
<td><input type="text" name="name" class="name"></td>
</tr>
</table>

<script>
    var searchTimeout;
    $(".number").keyup(function() {
    searchKey = this.value;
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
    getdata(searchKey);    
    }, 200);
});
    
/* FIND A NAME MATCHING THE NUMBER */
    
    function getdata(searchKey) {
    $.ajax({
        url: 'get_data.php',
        type: 'GET',
        dataType: 'json',
        data: {number: searchKey},
        success: function(data) {
            if(data.status) {
            $(this).closest("tr").next().find(".name").val(data.some_data);
            } else {
            $(this).closest("tr").next().find(".name").val("No match");
            }   
        }
    });         
    }
</script>

数据已正确获取，但我无法显示它，因为将其放置在正确的字段中存在问题。

在试验时，我尝试将选择器更改为：

$(input).closest.(".name").val(data.some_data);

并且它起作用了-但是它应用于下面动态添加的所有行中的所有类“名称”字段，并且当我尝试在第二个“数字”字段中输入数据时-什么也没发生（所以我猜选择器位于 $(" .nu​​mber").keyup(function() 也不正确)。

请帮助我处理此代码，以便将每一行视为单独的操作，并将数据显示在正确选择的字段中。谢谢！

Answer 1

当您调用函数时，传递 this 以及引用发生事件的输入框。因此，在 settimeout 之外添加此行 var selector = this 然后将其传递到此处 getdata(searchKey ,selector) 。最后将 $(this).clo.. 更改为$(el).closest.. 其他也一样，不需要next() 删除。

演示代码：

var searchTimeout;
$(document).on('keyup', '.number', function() {
  searchKey = this.value;
  var selector = this //add this line
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(function() {
    getdata(searchKey, selector); //pass that as well
  }, 200);
});

//add it here 
function getdata(searchKey, el) {
  /*$.ajax({
    url: 'get_data.php',
    type: 'GET',
    dataType: 'json',
    data: {
      number: searchKey
    },
    success: function(data) {*/
  //just for demo
  var data = {
    "status": "ok",
    "some_data": "abcgh"
  }
  if (data.status) {
    //remove next and use `el`
    $(el).closest("tr").find(".name").val(data.some_data);
  } else {
    $(el).closest("tr").find(".name").val("No match");
  }
  /*}
  });*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="example" id="example">
  <tr>
    <!-- rows are dynamically added -->
    <td><input type="text" name="number" class="number"></td>
    <td><input type="text" name="name" class="name"></td>
  </tr>
  <tr>
    <!-- rows are dynamically added -->
    <td><input type="text" name="number" class="number"></td>
    <td><input type="text" name="name" class="name"></td>
  </tr>
  <tr>
    <!-- rows are dynamically added -->
    <td><input type="text" name="number" class="number"></td>
    <td><input type="text" name="name" class="name"></td>
  </tr>
</table>