при(щелчке) делегировании событий .Массив forEach.от показывает только выбранный элемент

#javascript #jquery #foreach #event-delegation

Вопрос:

Я пытаюсь изменить цвет фона динамических html-элементов ( span ), когда пользователь нажимает на них.

 function showQuestion(){
    for(let i = 0; i < QuesPartA.length; i  ){
      $(".questionBox").append('<div class="Question">Number '  parseInt(i 1)  '</div>');
      QuesPartA[i]['option'].forEach(option => {
          $(".questionBox").append('<span class="pilihan">' option  ' </span><br>');  
      });
  } 

$(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>');
  };

$(".questionBox").on("click", "span.pilihan", function() {
  Array.from(document.getElementsByClassName("pilihan"))
  .forEach((element) => element.style.backgroundColor = "red");
    });
 

Тем не менее, я хочу, чтобы только один щелчок изменил цвет , не все span.pilihan , но мой код выше изменил цвет на красный.

Есть идеи?

Комментарии:

1. «но мой код выше меняет весь цвет на красный» — Потому что это именно то, что вы сказали сценарию сделать… -> Array.from(...).forEach(...)

2.Учебный центр jQuery -> События, .on()

3. Есть идеи, как изменить только тот, на который нажали? @Андреас

4. Конечно. Вы также получите его, если проверите ссылки, которые я добавил в своем втором комментарии.

Ответ №1:

Напиши это:

  $(".questionBox").on("click", ".pilihan", function() {
  $(this).css("background", "red");
});