JQuery中click的回调函数中index的作用是什么？

Question

以下代码有效。我想了解为什么

i

用作回调函数参数列表中的索引。它的目的是什么？如果我从回调函数的参数列表中删除

i

，它不起作用。为什么？

$("#btn1").click(function(){
  $("#test1").text(function(i, origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

Answer 1

对于许多 jQuery 方法，您可以传递：

1. undefined

   （没什么）
2. 一个值（字符串、数字、布尔值、对象...）
3. 函数语句（回调）。

所以重点关注第三个。当您提供函数语句时，请考虑该方法在调用传入函数之前会执行几件事。这就是为什么它被称为

callback

。所以

.text(callback)

通过传入一些参数来调用（读取执行）你的

callback

。

在这种情况下，第一个参数是一个数字，表示匹配元素的索引。所以你可以在这里想象一个循环。第二个是匹配元素的原文。

文档

所以你必须在编写回调时考虑到这一点。您不会被迫使用这些参数，但它可供您使用。

所以...

$(selector).text(function(i, origText){
  
  // outputs a number
  console.log(i)
  
  // outputs a tring
  console.log(origText)
  
  // Expected to be returned is a string to use to set the element's text
  return "Something else"
}

在上面，由于没有使用参数来构建返回的字符串，因此它与：

$(selector).text("Something else")

但是使用函数允许您在要设置的文本中使用回调的参数：

$(selector).text(function(i, origText){
  
  // outputs a string containing the index number in the $(selector) collection
  return "I am element " + i;
}

或者应用一些逻辑，例如：

$(selector).text(function(i, origText){
  
  // Only the text of the second matching element will be changed (index is zero-based)
  if(i == 1){
    return "I am element " + i;
  }else{
    return origText
  }
}

现在，由你来说出论点......如果这是问题的话。

$(selector).text(function(pineapple, banana){
  
  // outputs a number
  console.log(pineapple)
  
  // outputs a tring
  console.log(banana)
  
  // Expected to be returned is a string to use to set the element's text
  return "Something else"
}

如果您只对

banana

参数感兴趣，您仍然必须命名第一个参数才能命名和使用第二个参数。如果

pineapple

对你没用的话，就不要在函数体中使用它。

希望对您有帮助。 ;)

Answer 2

回调函数有两个参数：所选元素列表中当前元素的索引和原始值。如果删除

i

，则回调函数被认为第一个参数是

origText

Answer 3

这里设置index的目的是，例如使用下面的代码，当选择多个元素时，index表示选择的多个元素中该元素的编号

$('.test').text((i, originalText) => {
      return 'updated value of' + i;
});

多个元素可以具有“test”类，因此索引表示正在执行文本函数的当前元素的编号