Моя функция меняет цвет числа (текста) при нажатии. Он правильно добавляет / удаляет «щелкнувший» класс, но мой массив (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
});
}
}