Как получить html элемента с помощью функции стрелки с помощью jquery

Question

Синтаксис, который мы используем, требует использования функций стрелок.Я все еще изучаю наше программное обеспечение, поэтому я не мог ответить, почему.Проблема в том, что я не знаю, как преобразовать обратные вызовы function () {} в обратные вызовы (e) =>, и решения, которые я пробовал, не работают.

Я прочитал всю документацию и другие ответы, касающиеся .each (), .find (), .html () и $ (this) против $ (e.currentTarget)

JsFiddle: https://jsfiddle.net/4gvowa18/2/

var i = 0;
var withThis = $(document).find("p").each(function(){
  $(this).html(i++);
  console.log($(this).html());
});

var j = 10;
var withArrow = $(document).find("p").each((e) =>{
    $(e.currentTarget).html(j++);
    console.log($(e.currentTarget).html());
});

withThis работает должным образом, но withArrow не

Ожидаемые результаты: обе функции изменяют HTML-теги

на новое содержимое.При регистрации содержимого тега html обе функции должны печататься на консоли.

Факт: только первая функция изменяет содержимое тега

.Первая функция выводит правильные значения на консоль, но вторая функция выводит неопределенное значение.

Answer 1

Нет ничего плохого в функции стрелки.

Вы просто используете each () неправильно.Вам нужно использовать value, чтобы получить элемент.Обычная функция не имеет этой проблемы, поскольку вы используете this, а не параметры обратного вызова.

$.each([ 52, 97 ], function( index, value ) {
  alert( index + ": " + value );
});

Исправленный фрагмент

// find elements
var banner = $("#banner-message")
var button = $("button")

var i = 0;
$(document).find("p").each(function() {
  $(this).html(i++);
  //console.log($(this).html());
});

var j = 10;
$(document).find("p").each((i, e) => {
  $(e).html(j++);
  //console.log($(e).html());
});

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
  withArrow();
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="banner-message">
  <p>TEST</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <button>Change color</button>
</div>