Forum PHP.pl > [JavaScript]Filtrowanie danych - if

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Filtrowanie danych - if - else

php11

2.07.2025, 15:36:30

Cześć,

korzystam z tego: https://stackoverflow.com/questions/4858572...586061#48586061

Filtrowanie działa pięknie, choć samo działanie nie do końca to ogarniam ;-)
Chciałbym wyswietlić informację, gdy zwracany wynik nie wyświetla nic (podany przykład zawsze zwraca jakąś wartość figur).

Kombinowałem cos jak poniżej dla color oraz shape, ale nie działa

[PHP] pobierz, plaintext 
if (color) {
    Array.from(cards).filter(card => !card.classList.contains(color)).forEach(card => card.classList.add('hidden'))
    moja_let = true;
} else {
    moja_let = false;
}
[PHP] pobierz, plaintext

Naprowadzicie mnie na rozwiązanie?
Dzięki!

trueblue

2.07.2025, 18:47:41

A możesz opisać co dokładnie chcesz osiągnąć?
Podany przykład filtruje elementy, które nie mają określonej klasy i nadaje im klasę 'hidden'.

php11

4.07.2025, 12:58:31

Dzięki za szybka i konkretna odpowiedź
Już się poprawiam :-)

Dodałem do selectów: gold oraz circle

[HTML] pobierz, plaintext 
<label>Choose the color
	<select id="selectColor" onchange="colorType();">
		<option value=""></option>
		<option value="gold">Gold</option>
		<option value="blue">Blue</option>
		<option value="red">Red</option>
	</select>
</label>
<label>Choose the shape
	<select id="selectShape" onchange="shapeType();">
		<option value=""></option>
		<option value="circle">Circle</option>
		<option value="round">Round</option>
		<option value="square">Square</option>
	</select>
</label>
[HTML] pobierz, plaintext

Gdy wybieram je oba (lub pojedynczo) nie dzieje się nic, bo nie dodałem div-ów z tymi klasami.

Gdy wybranie selecta generuje 0 wyników chcę wyświetlic komunikat: zmień wybór
Tylko i aż tyle ;-)

trueblue

4.07.2025, 14:12:49

[HTML] pobierz, plaintext 
<label
  >Choose the color
  <select id="selectColor">
    <option value=""></option>
    <option value="gold">Gold</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
  </select>
</label>
<label
  >Choose the shape
  <select id="selectShape">
    <option value=""></option>
    <option value="circle">Circle</option>
    <option value="round">Round</option>
    <option value="square">Square</option>
  </select>
</label>
 
 
<span class="gold round">gold round</span>
<span class="gold square">gold square</span>
<span class="red square">red round</span>
[HTML] pobierz, plaintext

Kod

document.addEventListener("change", function (e) {
  if (
    e.target.tagName === "SELECT" &&
    (e.target.id === "selectColor" || e.target.id === "selectShape")
  ) {
    let chosen = []

    if (
      document.getElementById("selectColor").value !== "" &&
      document.getElementById("selectShape").value !== ""
    ) {
      chosen = document.querySelectorAll(
        "." +
          document.getElementById("selectColor").value +
          "." +
          document.getElementById("selectShape").value,
      )

      if (chosen.length === 0) {
        alert(1)
      }
    }
  }
})

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.