Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] pokaż ukryj kilka niezależnych divów
Forum PHP.pl > Forum > Przedszkole
lordvanyuri
Witam,

mam problem ze skryptem JS.

Na stronie wyświetla się z bazy nieznana na początku ilość rekordów (ponieważ na bieżąco są dodawane nowe rekordy)

NAZWA KONTAKTU
SZCZEGÓŁY KONTAKTU

Po kliknięciu w nazwa kontaktu jak rozwinąć szczegóły dla danego kontaktu?

KOD NA STRONIE:

  1. <?
  2. $i=1;
  3. $wynik=mysql_query("SELECT * FROM kontakty");
  4. while ($rekord = mysql_fetch_assoc ($wynik)) {
  5. $username = $rekord['username'];
  6. $inne1 = $rekord['inne1'];
  7. $inne2 = $rekord['inne2'];
  8. $inne3 = $rekord['inne3'];
  9.  
  10. <h3><div id="pokaz'.$i.'" style="display: inline; pointer: cursor" onclick="pokaz(pokaz'.$i.',schowaj'.$i.',show_more'.$i.')">+</div><div id="schowaj'.$i.'" onclick="schowaj(pokaz'.$i.',schowajref'.$i.',ref_more'.$i.')" style="display:none">-</div> Username: <span>'.$username.'</span></h3>
  11.  
  12. <div id="show_more'.$i.'" class="ref_more" style="display: none">
  13. <h3>Inne1: <span>'.$inne1.'</span></h3>
  14. <h3>Inne2: <span>'.$inne2.'</span></h3>
  15. <h3>Inne3: <span>'.$inn3.'</span></h3>
  16. </div>
  17. ';
  18. $i++;
  19. }


KOD W JS:

function pokaz(pokaz,schowaj,showmore) {
document.getElementById(showmore).style.display = 'block';
document.getElementById(pokaz).style.display = 'none';
document.getElementById(schowaj).style.display = 'inline';
}
function schowaj(pokaz,schowaj,showmore) {
document.getElementById(showmore).style.display = 'none';
document.getElementById(schowaj).style.display = 'none';
document.getElementById(pokaz).style.display = 'inline';
}


Na pojedyńczym elemencie ta metoda działa, ale nie działa już, jak każdy element ma swoje unikalne id. Kombinowałem już nawet z jQuery, ale cały czas się rozwala skrypt. Ma ktoś jakiś pomysł?
kamil_lk
parametry w apostrofy, tj. tu:
  1. onclick="pokaz(pokaz'.$i.',schowaj'.$i.',show_more'.$i.')"


Działajacy przykład:
  1. <h3>
  2. <div id="pokaz1" style="display: inline; pointer: cursor" onclick="pokaz('pokaz1','schowaj1','show_more1')">+</div>
  3. <div id="schowaj1" onclick="schowaj('pokaz1','schowaj1','show_more1')" style="display:none">-</div>
  4. Username: <span>Nazwa użytkownika</span>
  5. </h3>
  6.  
  7. <div id="show_more1" class="ref_more" style="display: none">
  8. <h3>Inne1: <span>Tekst</span></h3>
  9. <h3>Inne2: <span>Tekst</span></h3>
  10. <h3>Inne3: <span>Tekst</span></h3>
  11. </div>
  12.  
  13. <h3>
  14. <div id="pokaz2" style="display: inline; pointer: cursor" onclick="pokaz('pokaz2','schowaj2','show_more2')">+</div>
  15. <div id="schowaj2" onclick="schowaj('pokaz2','schowaj2','show_more2')" style="display:none">-</div>
  16. Username: <span>Nazwa użytkownika</span>
  17. </h3>
  18.  
  19. <div id="show_more2" class="ref_more" style="display: none">
  20. <h3>Inne1: <span>Tekst</span></h3>
  21. <h3>Inne2: <span>Tekst</span></h3>
  22. <h3>Inne3: <span>Tekst</span></h3>
  23. </div>
  24.  
  25. <h3>
  26. <div id="pokaz3" style="display: inline; pointer: cursor" onclick="pokaz('pokaz3','schowaj3','show_more3')">+</div>
  27. <div id="schowaj3" onclick="schowaj('pokaz3','schowaj3','show_more3')" style="display:none">-</div>
  28. Username: <span>Nazwa użytkownika</span>
  29. </h3>
  30.  
  31. <div id="show_more3" class="ref_more" style="display: none">
  32. <h3>Inne1: <span>Tekst</span></h3>
  33. <h3>Inne2: <span>Tekst</span></h3>
  34. <h3>Inne3: <span>Tekst</span></h3>
  35. </div>

  1. <script type="text/javascript">
  2. function pokaz(pokaz,schowaj,showmore) {
  3. console.log(pokaz);
  4. console.log(schowaj);
  5. console.log(showmore);
  6.  
  7. document.getElementById(showmore).style.display = 'block';
  8. document.getElementById(pokaz).style.display = 'none';
  9. document.getElementById(schowaj).style.display = 'inline';
  10. }
  11. function schowaj(pokaz,schowaj,showmore) {
  12. console.log(pokaz);
  13. console.log(schowaj);
  14. console.log(showmore);
  15.  
  16. document.getElementById(showmore).style.display = 'none';
  17. document.getElementById(schowaj).style.display = 'none';
  18. document.getElementById(pokaz).style.display = 'inline';
  19. }
lordvanyuri
Dzięki, w międzyczasie też coś męczyłem i połączyłem z Twoimi skryptami i działa dobrze smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.