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

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

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

标签： jqueryjquery-selectors

Answer 1

当你调用你的函数 pass 时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>