Powinno zadziałać:
<div data-related="1,2,3,4">related-1-</div>
Idea dobra ale bez modyfikacji JS nie zadziała.
Konieczne jest wprowadzenie zmian w fragmencie, który wskazał @_13th_Dragon aczkolwiek zmiana wymaga czegoś więcej ni tylko dopisania kolejnych identyfikatorów w atrybucie data-related.
Dostałeś gotowca i uważam, że mógłbyś wykazać odrobię więcej samodzielności poprzez zrozumienie tego co dostałeś.
W tej chwili wygląda na to, że w ciemno nie rozumiejąc jak działa obecne rozwiązanie prowadzisz eksperymenty na zasadzie może się uda...
Ten kod wymaga modyfikacji:
boxEl.addEventListener("mouseover",()=>{
// aktywuję wybrane
let relationNumber = boxEl.getAttribute("data-box-no");
let relatedBoxList = document.querySelectorAll ( "[data-related=\""+relationNumber.toString()+"\"]" ); // <--- na co to zamienić?
relatedBoxList.forEach( (boxRel)=>{
boxRel.classList.add ("active");
} );
});
Problem się sprowadza do tego żeby tak zmodyfikować linę:
let relatedBoxList = document.querySelectorAll ( "[data-related=\""+relationNumber.toString()+"\"]" ); // <--- na co to zamienić?
aby w zmiennej relatedBoxList znalazły się elementy, które w wartości atrybyutu data-related mają wartość relationNumber.
Pamiętaj, że wartość atrybutu to ciąg liczb oddzielonych znakiem przecinka.
Można też zrobić mniej elegancko i zastosować wiele atrybutów bez wartości. Np.
<div data-related-1 data-related-4 data-related-5>xxxxx</div>
Wówczas selektor elementów do podświetlenia wyglądałby tak:
let relatedBoxList = document.querySelectorAll ( "[data-related-"+relationNumber.toString()+"]" );
Jednak w tym przypadku konieczna będzie zmiana JS odpowiadającego za czyszczenie podświetlenia.