Не можете сравнить index () и целое число?

Question

Я очень смущен.Я пытаюсь сравнить index () некоторых элементов li с изменяющимся целым числом var, но даже при печати в консоль и при попытке parseInt() в обоих случаях это или любое сравнение возвращает false:

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

Fullкод:

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.midMenuIndex и ничего.Оба выводят цифры 0-2 соответственно на консоль.Почему сравнение не работает здесь?

Answer 1

Хотя я не могу быть уверен, что this означает в большинстве вашего кода, я могу сказать, что $('.dots li').each(function() { ... } изменит то, что this относится к .В документации jQuery :

При каждом вызове метода jQuery .each() контекст функции обратного вызова - this - устанавливается в элемент DOM.

Это означает, что в большей части вашего кода this.midMenuIndex будет ссылаться на то же значение, однако в вашей последней строке ( внутри .each(function() { ... })), this.midMenuIndexбудет ссылаться на свойство midMenuIndex текущего итерируемого элемента.

Чтобы сохранить ссылку на "внешний" 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);
});