JQuery - wyswietlanie elementu po kliknieciu

0

Witam. Robię stronkę zespolu i wlasnie wzialem sie za dzial dyskografia. W tym dziale wyswietlaja mi sie albumy razem z tytulem, chcialbym zeby po kliknieciu na okladke badz tytul wyswietlaly mi sie tytuly, ktore sa domyslnie ukryte. Ale kod mi nie dziala. Porsze o pomoc
Oto kod

<table id="leftPanel">
 <tr class="obraz" id="obraz1">
 <td><img src="images/covers/Led.jpg" style="width:80px; height:80px;" alt="brak"/></td>
 <td>Led Zeppelin I</td>
 </tr>
 <tr class="opis" id="opis1">
 <td>1. Good Times Bad Times<br />
2. Babe Im Gonna Leave You<br />  	 
3. You Shook Me<br />
4. Dazed And Confused<br />
5. Your Time Is Gonna Come<br />
6. Black Mountain Side<br />
7. Communication Breakdown<br />
8. I Cant Quit You Baby<br />
9. How Many More Times</td>
 </tr>
<tr class="obraz">
 <td><img src="images/covers/LedII.jpg" style="width:80px; height:80px;" alt="brak"/></td>
 <td>Led Zeppelin I</td>
 </tr>
 <tr class="opis" id="opis2">
 <td>
 1. Whole Lotta Love<br />
2. What Is And What Should Never Be<br />
3. The Lemon Song<br />
4. Thank You<br />
5. Heartbreaker<br />
6. Living Loving Maid (Shes Just A Woman)<br />
7. Ramble On<br />
8. Moby Dick<br />
9. Bring It On Home</td>
 </tr>


 </table>

jquery:

 

$(function() {
    $('.opis').hide();
    $('#leftPanel .obraz').click(function() {
        var ID = $(this).attr('id');
        $(ID).next().fadeIn();
    });

});
0

Spróbuj .show()
zamiast fadeIn()

0

nic z tego, w ogole nie reaguje na klikniecie...

0

Wg. mnie to wina tabelki, po prostu nie akceptuje kliknięcia na wiersz, spróbuj to przerobić na warstwy, albo coś w tym stylu.

0 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function()
{
    $('.opis').hide();
	
    $('#leftPanel .obraz').click(function()
	{
		 var ID = $(this).attr('id');
        $(this).next().show();
    });
 
});
</script>
</head>
<body>
	<div id="leftpanel">
	
		<div class="obraz" id="obraz1">
			<img src="images/covers/Led.jpg" style="width:80px; height:80px;" alt="brak"/>Led Zeppelin I
		</div>
		<div class="opis" id="opis1">
			<ol>
				<li>pozycja</li>
				<li>pozycja</li>
			</ol>
		</div>

	</div>
</body>
</html>

To działa, przeanalizuj sobie kod

0

W takim razie czemu na tabelkach nie chce to dzialac? Samo wychwycenie zdarzenia klikniecia na wiersz dziala:

$(function() {
    $('.opis').hide();
    $('table .obraz').click(function() {
        alert('dziala kurwa');
    });

});

nie rozumiem wiec dlaczego wyswietlanie tytulow nie chce dzialac

W jaki sposob zmienic wartosc elementu na podstawie zmiennej do ktorej jest przypisana nazwa klasy. Przykladowo:

$(function() {
    $('.opis').hide();
    $('table .obraz').click(function() {
        var zm = $(this).next().attr('id');
        //alert(zm);
        $(zm).fadeIn();

    });

})

;
W momencie kiedy wykonam alert(zm) wyswietla mi poprawna nazwe id. Ale kiedy podaje ja jako nazwe klasy $(zm) , to jquery nie wie czy to jest klasa czy id, jak to mozna sprecyzowac.
Blad nie lezy po stronie tabelki tylko po stronie wartosci zmiennej.

0
  1. Drugi tr nie ma id, więc dla niego na pewno nie zadziała.
  2. pobierasz ID elementu, który masz żeby pobrać go po ID... Choć nie do końca poprawnie. $(ID) (gdzie ID='obraz1') powoduje wywołanie $('obraz1'), podczas gdy chodzi zapewne o $('#obraz1'). Rozwiązanie? Trywialne: $(this).next().show();.

P.S. Polecam do debugowania firebuga + console.log (razem z wtyczką FireQuery) albo narzędzia deweloperskie chroma/safari. Wszystko byle nie alert.

0 
<tr class="obraz">
 <td><img src="images/covers/LedII.jpg" style="width:80px; height:80px;" onclick="document.getElementById('opis2').style.display='block';" alt="brak"/></td>
 <td>Led Zeppelin I</td>
 </tr>
 <tr class="opis" style="display:none;" id="opis2">
 <td>
 1. Whole Lotta Love<br />
2. What Is And What Should Never Be<br />
3. The Lemon Song<br />
4. Thank You<br />
5. Heartbreaker<br />
6. Living Loving Maid (Shes Just A Woman)<br />
7. Ramble On<br />
8. Moby Dick<br />
9. Bring It On Home</td>
 </tr>
 
 
 </table>

1 użytkowników online, w tym zalogowanych: 0, gości: 1