Ukryj, pokaż element (wiele elementów) Opcje

[Masterson]

Witam.

Na stronie generuję listę rekordów, które wyświetlane są z parametrami. Z racji tego, że lista + parametry zajmują dużo miejsca, to postanowiłem je poukrywać i dać możliwość rozwinięcia uch po kliknięciu w przycisk.

skrypcik w jQuery wygląda tak:

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(".hide_table").click(function () {
$(".param_table").toggle("slow");
});    
</script>
 
<div style="float:left;">Szafa</div>
<div class="hide_table" style="float:left;">Pokaż parametry</div>
<div style="cleart:both;">
 
<table class="param_table" style="display:none;">
		<tbody>
			<tr>
				<th>Kolor</th>
				<th>Długość</th>
				<th>Szerokość</th>
			</tr>
			<tr>
				<td>Czarny</td>
				<td>115 cm.</td>
				<td>82 cm.</td>
			</tr>                          
		</tbody>
</table>
[HTML] pobierz, plaintext 

Oczywiście działa poprawnie, ale tylko dla elementu o określonej klasie (w tym przypadku kliknięcie w div'a hide_table ukrywa tabele o klasie param_table. Gdybym chciał wykonać zwijanie/ rozwijanie dla wszystkich rekordów to musiałbym w miniskrypciku podawać wszystkie użyte klasy dla ukrywacza i dla elmentu ukrywającego. Obstawiam, że jest jakaś metoda aby w jQuery podać jakiś parametr (wyrażenie?), które nie będzie wymagało podawania wszystkich klas w skrypcie tak żeby element ukrywający sam dopasował "element ukrywany" na podstawie np. id?

Coś w stylu:
<script type="text/javascript">
$(".hide_table[x++]").click(function () {
$(".param_table[x++]").toggle("slow");
});
</script>

Druga sprawa. Teraz w divie, który pokazuje/ ukrywa parametry mam frazę "Pokaż parametry". Chciałbym aby w momencie rozwinięcia parametrów pojawiła się inna fraza, np. Ukryj parametry.

To jest moja pierwsza styczność z jQuery i pytania dla wielu z Was pewnie są banalne. Jeśli ktoś wie jak to zrobić to może zechce się podzielić wiedzą .

Pozdrawiam

[Kostek.88]

Przeciez mozesz te same klasy ponadawac dla wielu elementow, poza tym masz duzo metod dojscia do elementow, np.

[HTML] pobierz, plaintext 
<div class="divy">
<div>opcja1</div>
<div>opcja2</div>
<div>opcja3</div>
<div>opcja4</div>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
$('.divy div').click(function(){
 
});
[HTML] pobierz, plaintext 

A co do drugiego:

[HTML] pobierz, plaintext 
 
$('.guzik').click(function(){
   if ($(this).text() == 'pokaz') {
      $(this).text() = 'ukryj';
   } else {
      $(this).text() = 'pokaz';
   }
});
[HTML] pobierz, plaintext 

Oczywiscie z glowy pisane, tak mniej wiecej... zapoznaj sie z text, val, attr - to odnosnie odczytywania wartosci. No i z opcjami find, parent, parents, next, prev itp., ktore ulatwia Ci wedrowke po elementach

EDIT: aha, jeszcze toggle, toggleClass, removeClass, addClass, removeAttr - z tym sie zapoznaj

Ten post edytował Kostek.88 6.12.2011, 00:22:17

[Masterson]

Dzięki za info.
Jutro na spokojnie sobie poszperam, teraz pora spać .

Jeśli chodzi o użycie tych samych nazw klas to właśnie chodzi o to, że nie mogę tego zrobić ponieważ jak rozwinąłbym parametry jednego rekordu to rozwinęłyby mi się wszystkie (mają tą samą klasę).

rekord1
paramery1

rekord2
parametry2

i tak do 100 na stronę :]

Chodziło właśnie o to żeby z automatu uruchomić skrypt dla klasa1, klasa2, klasa3 itd., ale to już jutro sobie poszperam.

Pozdrawiam

[by_ikar]

Dzięki za info.
Jutro na spokojnie sobie poszperam, teraz pora spać .

Jeśli chodzi o użycie tych samych nazw klas to właśnie chodzi o to, że nie mogę tego zrobić ponieważ jak rozwinąłbym parametry jednego rekordu to rozwinęłyby mi się wszystkie (mają tą samą klasę).

rekord1
paramery1

rekord2
parametry2

i tak do 100 na stronę :]

Chodziło właśnie o to żeby z automatu uruchomić skrypt dla klasa1, klasa2, klasa3 itd., ale to już jutro sobie poszperam.

Pozdrawiam

Poczytaj pierw o selektorach w css, potem o selektorach w jquery, a potem to już powinieneś sam pisać takie rozwiązania:

[HTML] pobierz, plaintext 
<script>
  $('.klasa1, .klasa2, .klasa3, .klasa4, .klasa5, .klasa6').click(function(){
     if ($(this).text() == 'pokaz') {
        $(this).text() = 'ukryj';
     } else {
        $(this).text() = 'pokaz';
     }
  });
</script>
[HTML] pobierz, plaintext 

http://api.jquery.com/class-selector/ poczytaj też komentarze, w komentarzach też jest wiele rzeczy których nie ma w dokumentacji.

EDIT: druga sprawa, przecież możesz w samym elemencie podać dodatkową klasę, przykładowo:

Kod

<div class="pierwsza_klasa druga_klasa trzecia_klasa"></div>

Ten post edytował by_ikar 6.12.2011, 08:59:14

[Masterson]

Poczytaj pierw o selektorach w css, potem o selektorach w jquery, a potem to już powinieneś sam pisać takie rozwiązania:

[HTML] pobierz, plaintext

<script>
$('.klasa1, .klasa2, .klasa3, .klasa4, .klasa5, .klasa6').click(function(){
if ($(this).text() == 'pokaz') {
$(this).text() = 'ukryj';
} else {
$(this).text() = 'pokaz';
}
});
</script>

Ale zrozum, że chcę uniknąć takiego rozwiązania. Jak będę miał 1000 rekordów na stronie to mam podać 1000 klas w skrypcie jQuery? Rozwiązanie co najmniej nieeleganckie. Na pewno użyję .attr, dorzucę sobie jakiś atrybut, np. hidden = X, gdzie X będzie kolejną liczbą porządkową rekordu - powinno zadziałać.

EDIT: druga sprawa, przecież możesz w samym elemencie podać dodatkową klasę, przykładowo:

Kod
<div class="pierwsza_klasa druga_klasa trzecia_klasa"></div>

To jest oczywiste, ale zamiast klasy użyję atrybuty specjalnie na potrzeby ukrywania.

Dzięki
Pozdrawiam

[Kostek.88]

A takie cos?

[HTML] pobierz, plaintext 
 
<dl>
   <dt>szafa <a class="link" href="java script:void(0)">pokaz parametry</a></dt>
   <dd><table> itd.</dd>
 
   <dt>szafa <a class="link" href="java script:void(0)">pokaz parametry</a></dt>
   <dd><table> itd.</dd>
 
   <dt>szafa <a class="link" href="java script:void(0)">pokaz parametry</a></dt>
   <dd><table> itd.</dd>
 
   <dt>szafa <a class="link" href="java script:void(0)">pokaz parametry</a></dt>
   <dd><table> itd.</dd>
 
   <dt>szafa <a class="link" href="java script:void(0)">pokaz parametry</a></dt>
   <dd><table> itd.</dd>
 
   <dt>szafa <a class="link" href="java script:void(0)">pokaz parametry</a></dt>
   <dd><table> itd.</dd>
</dl>
 
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
   $(document).ready(function(){
 
   $('dd').hide();
 
   $('a.link').click(function() {
      $(this).parent('dt').next('dd').toggle('slow');
 
      if ($(this).text() == 'pokaz parametry') {
         $(this).text() = 'ukryj parametry';
      } else {
         $(this).text() = 'pokaz parametry';
      }
   });
 
});
[PHP] pobierz, plaintext 

Cos tego typu... ja bym to tak okodowal. Oczywiscie mozesz przerobic na swoje potrzeby. Wskazowka: jesli chcesz wyjsc kilka poziomow wyzej to zamiast parent musi byc parents. Ale, zeby nie bylo tak latwo... jak masz zagniezdzonych w sobie kilka div-ow, to moze Ci zlapac wszystkie nadrzedne, dlatego pomocne jest czasami:

[PHP] pobierz, plaintext 
   $(this).parents('div:first').................... itd.
[PHP] pobierz, plaintext 

Ten post edytował Kostek.88 6.12.2011, 21:18:32