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);

并且有效 - 但它适用于动态添加到下方的所有行中的所有 class “名称”字段，并且当我尝试在第二个“数字”字段中输入数据时 - 没有任何反应（所以我猜$(".number").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>

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

JavaScript selectors: how to find the next input field

jquery

jquery-selectors