Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][jquery]
Forum PHP.pl > Forum > Przedszkole
marcwars
Mam skrypt składający się z pliku html i jquery.
W skrypcie są wykazy, które są otwarte (css-display) aż do li z treścią więcej.
Takich list jest kilka (pokazałem tylko dwie dla jasności).
Generalnie chodzi o to, aby klikając ostatni link (więcej) na liście wyświetlała się lista do końca (li z a href=nowy_tekst), ale chowały inne wyciągnięte listy (w innych ul).

kod html- istotne fragmenty:
  1. .......
  2. //pierwszy wykaz
  3. <div>
  4. <ul>
  5. <li class="dolne"><a href="#" class="dolne">aaa</a></li>
  6. <li class="dolne"><a href="3" class="dolne">bbb</a></li>
  7. //specjalny link do dalszej części tekstu
  8. <li class="dolne_b"><a href="#" class="wiecej_link">więcej</a></li>
  9. //schowany link
  10. <li class="dolne_b wiecej_tekstu"><a href="nowy_tekst" class="dolne_b">cccc</a></li>
  11. </ul>
  12. </div>
  13.  
  14. //drugi wykaz
  15. <div>
  16. <ul>
  17. <li class="dolne"><a href="#" class="dolne">ddd</a></li>
  18. <li class="dolne"><a href="3" class="dolne">eee</a></li>
  19. //specjalny link do dalszej części tekstu
  20. <li class="dolne_b"><a href="#" class="wiecej_link">więcej</a></li>
  21. //schowany link
  22. <li class="dolne_b wiecej_tekstu"><a href="nowy_tekst" class="dolne_b">fff</a></li>
  23. </ul>
  24. </div>
  25. ........


kod w jquery:
  1. function()
  2. {
  3. $("a.wiecej_link").click( function() {
  4. //LINIA PONIŻEJ DZIAŁA, POTRAFI TYLKO SCHOWAĆ .wiecej_tekstu;
  5. $(".wiecej_tekstu").show();
  6. //PONIŻEJ JEST JAKIŚ BŁĄD?
  7. $("ul.wiecej_tekstu:visible").not(this).hide();
  8. });
  9. });


Niestety, chociaż działa pierwsza linijka ("$(".wiecej_tekstu").show(); "), to skrypt nie chowa pozostałych otwartych części wykazów.
Będę wdzięczny za wskazówkę, bo pewnie rozwiązanie jest genialne ale proste smile.gif
Shili
Nie za bardzo jestem pewna, czy dobrze rozumiem Twoje zamierzenia.
Biorąc jednak pod uwagę Twój kod:

  1. function()
  2. {
  3. $("a.wiecej_link").click( function() {
  4. $(".wiecej_tekstu").show(); // 1.
  5. $("ul.wiecej_tekstu:visible").not(this).hide(); // 2
  6. });
  7. });


1. Raczej pierwszym krokiem powinno być schowanie wszystkich elementów .wiecej_tekstu, a odkrycie tylko jednego konkretnego;

2. this w postaci jQuery to $(this); warto pamiętać.

  1. function()
  2. {
  3. $("a.wiecej_link").click( function() {
  4. $(".wiecej_tekstu").hide(); // 3.
  5. $(this).parent().find('.wiecej_tekstu').show(); // 4.
  6. });
  7. });



3. Najpierw chowamy wszystko co można

4. Później wychodzimy z klikniętego pola, szukamy rodzica, w rodzicu szukamy elementów .wiecej_tekstu i tylko je odkrywamy

Być może pewne elementy będziesz musiał sobie dostosować (w sensie na pewno, zostawiłam złośliwie i specjalnie małą niespodziankę ^^). Natomiast zazwyczaj w tą stronę piszę się tego typu kody
mortus
Jeśli kolega używa .not() to nie musi najpierw ukrywać wszystkich elementów o klasie wiecej_tekstu. Problemem jest tutaj raczej odwołanie do this w metodzie .not(). Rozwiązanie tutaj.

Jednakże Twój kod Shili również spełnia swoje zadanie, choć nie do końca, ale na temat użycia listy do tego typu zastosowania można w ogóle dywagować.
Shili
@mortus
Jasne, co nie zmienia faktu, że rozchodzi się tutaj o ilość przeparsowań DOM.

Ja wiem, że dzisiaj komputery są potężne i można sporo z nimi zrobić, natomiast tam gdzie mogę kieruję na rozwiązania mniej zasobożerne, nawet jeśli chodzi o drobnostki. Dlatego też nie modyfikowałam rozwiązania kolegi. Powinnam być może wyraźniej o tym napisać - dzięki, na przyszłość postaram się pamiętać smile.gif

Btw, odwołania w postaci div#my_id i div.my_class też są bardziej zasobożerne niż samo .my_class czy #my_id. To tak na marginesie, ponieważ ogólnie Twój kod przy takim skorzystaniu z $(this) jest porównywalnie wydajny do tego, który zaprezentowałam, a który odwraca kota ogonem tongue.gif
marcwars
Niestety nic mi nie działa sad.gif
mortus
Cytat(marcwars @ 14.12.2011, 19:39:21 ) *
Niestety nic mi nie działa sad.gif


Bo skrypt jQuery powinien zaczynać się inaczej:
[JAVASCRIPT] pobierz, plaintext
  1. //czyli tak:
  2. $(function() {
  3. // ciało
  4. });
  5.  
  6. // lub tak:
  7. $(document).ready(function() {
  8. // ciało
  9. });
  10.  
  11. // lub jeszcze inaczej
[JAVASCRIPT] pobierz, plaintext
marcwars
Ok, rzeczywiście, zostawiłem kawałek z poprzednich funkcji- alem gapa:(
Dziękuję za pomoc!
mortus
Jeśli tak, to powinno działać. A wstawiłeś wcześniej znacznik <script> z odwołaniem do zewnętrznego źródła jQuery? Udostępnij całość online.
marcwars
Jw, dzięki setnie!!!
Zamykam temat, wszystko już działa jak trzeba:)
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.