при нажатии кнопки для нескольких кнопок с одним и тем же классом

Question

У меня есть компонент, который заполняется несколько раз на странице. Внутри этого компонента у меня есть кнопка, которая при нажатии скрывает часть контента и показывает другой.

Что я ожидаю: при нажатии каждой кнопки должна выполняться функция initAnswer ().

Что я иметь сейчас: после нажатия на кнопку ничего не происходит, и я не получаю ошибки.

PS Я проверил другие темы и попытался повторить ответы, но безуспешно. Спасибо!!! 100

let selectedShadeButton = document.querySelectorAll('.shade-btn');

let shadeDataSet = selectedShadeButton.dataset.sheertexShade;

for(let i = 0; i < selectedShadeButton.length; i++) {

selectedShadeButton[i].addEventListener('click', (event) => {
  if(event = event.target){
    initAnswer();
  }
})

}

function initAnswer() {
  document.querySelector('.nudes-wrapper').style.display = 'none';
  document.querySelector('.nudes-thanks').style.display = 'block';
  document.querySelector('.shady-answer').innerHTML = shadeDataSet;
}

<div id="nudesModal" class="modalnudes">

{% comment %} Modal content {% endcomment %}
  <div class="modal-content">
    <span class="close-nudespop">&times;</span>
    <div class="inner-content">
    <p class="sm:tw-text-4xl tw-leading-tight sm:tw-ml-auto pop-title tw-text-2xl">Which group should we start from?</p>
    <p>The subtitle of the modal</p>
    </div>
    <div class="nudes-wrapper tw-flex">
      <div class="shade-container">
        {% include 'shade-picker.row', shade_name: 'S1' %}
        {% include 'shade-picker.row', shade_name: 'S2' %}
        {% include 'shade-picker.row', shade_name: 'S3' %}
        {% include 'shade-picker.row', shade_name: 'S4' %}
        {% include 'shade-picker.row', shade_name: 'S5' %}
        {% include 'shade-picker.row', shade_name: 'S6' %}
      </div>
      <div class="magnified-img">

      </div>
    </div>
    <div class="nudes-thanks tw-hidden">
    {% include 'nudes-thank-you' %}
    </div>
  </div>

</div>


/* inside the shade-picker.row */

<div class="shade-{{shade_name}} shade-of-nude">
  <label>{{ shade_name }}</label>
  <div class="shade-img tw-flex">
    <img class="lazyload" data-src="{{ shade_name | append: '-face1.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
    <img class="lazyload" data-src="{{ shade_name | append: '-face2.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
    <img class="lazyload" data-src="{{ shade_name | append: '-face3.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
    <img class="lazyload" data-src="{{ shade_name | append: '-face4.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}"> 
    <noscript>
      <img class="lazyloaded" data-src="{{ shade_name | append: '-face1.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
      <img class="lazyloaded" data-src="{{ shade_name | append: '-face2.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
      <img class="lazyloaded" data-src="{{ shade_name | append: '-face3.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
      <img class="lazyloaded" data-src="{{ shade_name | append: '-face4.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}"> 
    </noscript>
  </div>
  <div>
    <button class="shade-btn" data-sheertex-shade='{{shade_name}}'>Pick {{ shade_name }}!</button>
  </div>
</div>

Answer 1

Проблема заключается в следующем:

let selectedShadeButton = document.querySelectorAll('.shade-btn');

Вы получите массив узлов в selectedShadeButton, и на этом массиве узлов вы не сможете получить доступ к набору данных. Таким образом, набор данных не определен. Чтобы решить проблему, вы можете отладить проблему, выполнив некоторую отладку.

console.log(selectedShadeButton)

Поможет вам понять, что происходит