<p class="Links" onclick="window.location.href = 'file:///C:/Users/Dell/Desktop/Online%20Store.html#Residential'; document.getElementById('residence1, residence2, residence3').style.display='block'; document.getElementById('Commercial').style.display='none';">
Residential
</p>

Próbuję, ale nie mogę wybrać więcej niż jednego identyfikatora za pomocą tej metody. Czy moja metoda jest poprawna czy zła?

0
0Bionic 2 kwiecień 2020, 16:00

3 odpowiedzi

Najlepsza odpowiedź

Jeśli chcesz zebrać kilka elementów w oparciu o więcej niż jeden selektor, querySelectorAll jest Twoim najlepszym przyjacielem.

W przeciwieństwie do jQuery, querySelectorAll zwraca obiekt typu NodeList, podobny do tablicy. Aby wykonać cokolwiek na każdym z członków kolekcji, musisz samodzielnie iterować po kolekcji, np. za pomocą forEach:

<p onclick="document.querySelectorAll('#residence1, #residence2, #residence3').forEach(el => el.style.display='block')">
Residential
</p>

<div id="residence1" style="display: none;">residence1</div>
<div id="residence2" style="display: none;">residence2</div>
<div id="residence3" style="display: none;">residence3</div>

Należy pamiętać, że dotyczy to tylko Twoich bezpośrednich potrzeb składniowych; to tylko naprawia twoje (złe) podejście.

Co powinieneś zamiast tego robić, a czego nie:

  • NIGDY nie pracuj z elementem.style - używaj klas CSS lub w przypadku pokazywania / ukrywania elementów użyj wbudowanego uniwersalnego atrybutu hidden HTML.

Przykład:

Zamiast robić

element.style.display = 'block'

Raczej upewnij się, że Twój CSS ma zdefiniowaną klasę .hidden

.hidden { display: none; }

A następnie, aby pokazać element, usuń z niego klasę i aby ją ukryć, dodaj klasę:

element.classList.remove('hidden'); // show
element.classList.add('hidden'); // hide

Jak wspomniano wcześniej, szczególnie w przypadku pokazywania / ukrywania, najprostszą rzeczą do zrobienia jest przełączenie właściwości logicznej hidden elementu:

element.hidden = false; // show
element.hidden = true; // hide

Lub, jeśli wolisz atrybuty zamiast właściwości:

element.removeAttribute('hidden'); // show
element.setAttribute('hidden', 'hidden'); // hide

Ponadto, jak już powiedzieli inni, jeśli chcesz przełączyć widoczność całej kolekcji elementów, najlepszym sposobem jest nadanie wszystkim tym elementom tej samej nazwy klasy CSS (co znacznie ułatwia wybór):

<p onclick="document.querySelectorAll('.residence').forEach(el => el.hidden = !el.hidden)">
Residential
</p>

<div class="residence" hidden>residence1</div>
<div class="residence" hidden>residence2</div>
<div class="residence" hidden>residence3</div>

Dodałem również możliwość raczej przełączania widoczności elementów div .residence, nie przypisując wartości literału do el.hidden, ale zamiast tego biorąc to, co już jest w el.hidden i odwracając wartość logiczną, używając not operator !.

0
connexo 2 kwiecień 2020, 14:18

Zakładam, że odnosisz się do tego kodu:

document.getElementById('residence1, residence2, residence3').style.display='block'

Możesz wybrać wiele elementów za pomocą .querySelectorAll() co zwróci listę węzłów, które możesz iteruj ponownie z .forEach()

Na przykład możesz wykonać następujące czynności:

document.querySelectorAll('#residence1', '#residence2', '#residence3').forEach(el => el.style.display='block')
0
Brendan C. 2 kwiecień 2020, 14:09

Możesz użyć selektorów zapytań, aby uzyskać wiele elementów jednocześnie. Sprawdź stronę, aby uzyskać krótką listę jak używać querySelectorAll().

W twoim przypadku możesz po prostu użyć

querySelectorAll("#id1, #id2, #id3") co zwróci tablicę wszystkich elementów pasujących do tych identyfikatorów

0
Luze 2 kwiecień 2020, 14:09