Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Ukryj, pokaż element (wiele elementów)
Masterson
post
Post #1





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 18.07.2011

Ostrzeżenie: (0%)
-----


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:
  1. <script type="text/javascript">
  2. $(".hide_table").click(function () {
  3. $(".param_table").toggle("slow");
  4. });
  5.  
  6. <div style="float:left;">Szafa</div>
  7. <div class="hide_table" style="float:left;">Pokaż parametry</div>
  8. <div style="cleart:both;">
  9.  
  10. <table class="param_table" style="display:none;">
  11. <tr>
  12. <th>Kolor</th>
  13. <th>Długość</th>
  14. <th>Szerokość</th>
  15. </tr>
  16. <tr>
  17. <td>Czarny</td>
  18. <td>115 cm.</td>
  19. <td>82 cm.</td>
  20. </tr>
  21. </tbody>


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ą (IMG:style_emoticons/default/smile.gif) .

Pozdrawiam
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Masterson
post
Post #2





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 18.07.2011

Ostrzeżenie: (0%)
-----


Dzięki za info.
Jutro na spokojnie sobie poszperam, teraz pora spać (IMG:style_emoticons/default/smile.gif) .

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
Go to the top of the page
+Quote Post
by_ikar
post
Post #3





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----


Cytat(Masterson @ 6.12.2011, 00:40:43 ) *
Dzięki za info.
Jutro na spokojnie sobie poszperam, teraz pora spać (IMG:style_emoticons/default/smile.gif) .

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:

  1. $('.klasa1, .klasa2, .klasa3, .klasa4, .klasa5, .klasa6').click(function(){
  2. if ($(this).text() == 'pokaz') {
  3. $(this).text() = 'ukryj';
  4. } else {
  5. $(this).text() = 'pokaz';
  6. }
  7. });


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
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 4.10.2025 - 07:10