javascript - 无法比较index()和整数？

Question

我很困惑。我试图将某些 li 元素的 index() 与不断变化的整数 var 进行比较，但即使将两者打印到控制台并尝试对两者进行 parseInt() ，此比较或任何比较都会返回 false:

$(this).index() <= this.midMenuIndex

完整代码:

if (event.key == "ArrowRight") {
  if (this.midMenuIndex < 2) {
    this.midMenuIndex++;
  }
} else if (event.key == "ArrowLeft") {
  if (this.midMenuIndex > 0) {
    this.midMenuIndex--;
  }
}

$('.dots li').each(function(){
  console.log(parseInt($(this).index()) == this.midMenuIndex);

我也尝试过 $(this).index() == this.midMenuInde​​x 但什么也没有。两者分别将数字 0-2 打印到控制台。为什么比较在这里不起作用？

Answer 1

虽然我无法确定 this 在您的代码的大部分中指的是什么，但我可以告诉您 $('.dots li' ).each(function() { ... } 将更改 this 所指的内容。Per jQuery's documentation :

Whenever you call jQuery's .each() method, the context of the callback function — this — is set to a DOM element.

这意味着在您的大部分代码中，this.midMenuInde​​x 将引用相同的值，但是在您的最后一行(内部 .each( function() { ... }))，this.midMenuInde​​x 将引用正在迭代的当前元素的 midMenuInde​​x 属性。

要保留对“外部”this 的引用，请将其存储为变量:

const self = this;
if (event.key == "ArrowRight") {
  if (self.midMenuIndex < 2) {
    self.midMenuIndex++;
  }
} else if (event.key == "ArrowLeft") {
  if (self.midMenuIndex > 0) {
    self.midMenuIndex--;
  }
}

$('.dots li').each(function() {
  console.log(parseInt($(this).index()) == self.midMenuIndex);
});