[JS] pokaż ukryj kilka niezależnych divów Opcje

[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:

[PHP] pobierz, plaintext 
<?
$i=1;
$wynik=mysql_query("SELECT * FROM kontakty");
while ($rekord = mysql_fetch_assoc ($wynik)) {
$username = $rekord['username'];
$inne1 = $rekord['inne1'];
$inne2 = $rekord['inne2'];
$inne3 = $rekord['inne3'];
 
print '
<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>
 
<div id="show_more'.$i.'" class="ref_more" style="display: none">
<h3>Inne1: <span>'.$inne1.'</span></h3>
<h3>Inne2: <span>'.$inne2.'</span></h3>
<h3>Inne3: <span>'.$inn3.'</span></h3>
</div>
';
$i++;
}
[PHP] pobierz, plaintext 

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ł?

Ten post edytował lordvanyuri 7.10.2015, 14:44:09

[kamil_lk]

parametry w apostrofy, tj. tu:

[PHP] pobierz, plaintext 
onclick="pokaz(pokaz'.$i.',schowaj'.$i.',show_more'.$i.')"
[PHP] pobierz, plaintext 

Działajacy przykład:

[HTML] pobierz, plaintext 
<h3>
	<div id="pokaz1" style="display: inline; pointer: cursor" onclick="pokaz('pokaz1','schowaj1','show_more1')">+</div>
	<div id="schowaj1" onclick="schowaj('pokaz1','schowaj1','show_more1')" style="display:none">-</div> 
	Username: <span>Nazwa użytkownika</span>
</h3>
 
<div id="show_more1" class="ref_more" style="display: none">
	<h3>Inne1: <span>Tekst</span></h3>
	<h3>Inne2: <span>Tekst</span></h3>
	<h3>Inne3: <span>Tekst</span></h3>
</div>
 
<h3>
	<div id="pokaz2" style="display: inline; pointer: cursor" onclick="pokaz('pokaz2','schowaj2','show_more2')">+</div>
	<div id="schowaj2" onclick="schowaj('pokaz2','schowaj2','show_more2')" style="display:none">-</div> 
	Username: <span>Nazwa użytkownika</span>
</h3>
 
<div id="show_more2" class="ref_more" style="display: none">
	<h3>Inne1: <span>Tekst</span></h3>
	<h3>Inne2: <span>Tekst</span></h3>
	<h3>Inne3: <span>Tekst</span></h3>
</div>
 
<h3>
	<div id="pokaz3" style="display: inline; pointer: cursor" onclick="pokaz('pokaz3','schowaj3','show_more3')">+</div>
	<div id="schowaj3" onclick="schowaj('pokaz3','schowaj3','show_more3')" style="display:none">-</div> 
	Username: <span>Nazwa użytkownika</span>
</h3>
 
<div id="show_more3" class="ref_more" style="display: none">
	<h3>Inne1: <span>Tekst</span></h3>
	<h3>Inne2: <span>Tekst</span></h3>
	<h3>Inne3: <span>Tekst</span></h3>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<script type="text/javascript">
function pokaz(pokaz,schowaj,showmore) {
	console.log(pokaz);
	console.log(schowaj);
	console.log(showmore);
 
    document.getElementById(showmore).style.display = 'block';
    document.getElementById(pokaz).style.display = 'none';
    document.getElementById(schowaj).style.display = 'inline';
}
function schowaj(pokaz,schowaj,showmore) {
	console.log(pokaz);
	console.log(schowaj);
	console.log(showmore);
 
    document.getElementById(showmore).style.display = 'none';
    document.getElementById(schowaj).style.display = 'none';
    document.getElementById(pokaz).style.display = 'inline';
}
</script>
[HTML] pobierz, plaintext 

[lordvanyuri]

Dzięki, w międzyczasie też coś męczyłem i połączyłem z Twoimi skryptami i działa dobrze