При итерации массива добавьте класс ко всем с совпадающим значением (Typescript) - PullRequest
0 голосов
/ 20 июня 2020

Моя функция меняет цвет числа (текста) при нажатии. Он правильно добавляет / удаляет «щелкнувший» класс, но мой массив (nodeList) содержит список чисел, которые имеют один и тот же номер более одного раза. Я хотел бы добавить класс «щелкнул» к каждому числу в массиве с тем же значением, а не только к числу, по которому щелкнули. Например, если я нажму на одну из 2, все 2 в абзаце получат класс и одновременно изменят цвет.
Это Angular 9 / Typescript (no Jquery).

HTML импортируется и создается динамически. Поэтому я могу перестроить его только с помощью Typescript. Вот пример, чтобы дать представление ...

    <h2>Procedure</h2>
<div>
    <div id="stp-0003" class="proceduralStep">
        <div class="Step_content">
            <div class="Step_first">Some content here... (<a class="spot_anchor">2</a>).</div>
        </div>
    </div>
    <div id="stp-0004" class="proceduralStep">
        <div class="Step_content">
            <div class="Step_first">More content here... (<a class="spot_anchor">1</a>) (2312AT3) and plate (<a class="spot_anchor">3</a>).</div>
        </div>
    </div>
    <div id="stp-0005" class="proceduralStep">
        <div class="Step_content">
            <div class="Step_first">Remove the screws (<a class="spot_anchor">2</a>) from the antenna (<a class="spot_anchor">1</a>) (2312AT3) and plate (<a class="spot_anchor">3</a>).</div>
        </div>
    </div>      
</div>

component.ts ...

updateNumbers(): void {
  const spotAnchors = this.element.querySelectorAll('.spot_anchor');  // nodeList of anchor tags w/textContent... 2,1,3,2,1,3

  for (let i = 0; i < spotAnchors.length; i++) {
    spotAnchors[i].addEventListener('click', () => {
      const removeClicked = Array.from(this.element.getElementsByClassName('clicked'));
      if (removeClicked.length > 0) {
        removeClicked.forEach(rem => {
          rem.classList.remove('clicked');
        })
      }
      spotAnchors[i].classList.add('clicked');
      this.onSelectedProcedurePartNumber(spotAnchors[i].textContent) // textContent passes one number
    });
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...