Skocz do zawartości
Pecetowicz Forum komputerowe

Wyświetlanie poszczególnych elementów


Rekomendowane odpowiedzi

Hej, 

potrzebuję pomocy w kwestii zaznaczania kilku elementów  w JS, i animowania ich w JQuery. 

Już tłumaczę głębiej;

Załóżmy, że mamy kod

        <ul id="page-list">
            <li class="page-list-el">Informatyka</li>
            <img src="img/informatyka.jpg" alt="informatyka">
            <p class="page-list-text">tekst</p>
            <li class="page-list-el">Sztuczna Inteligencja</li>
            <img src="img/SI.png" alt="Sztuczna Inteligencja">
            <p class="page-list-text">tekst</p>
            <li class="page-list-el">Komputery</li>
            <img src="img/komputer.png" alt="Komputery">
            <p class="page-list-text">tekst</p>
            <li class="page-list-el">Kodowanie</li>
            <img src="img/code.jpg" alt="Kodowanie">
            <p class="page-list-text">tekst</p>
        </ul>

Po kliknięciu na element "page-list-el" automatycznie rozwija się "page-list-text" i tak to ma działać, problem w tym, że działa tylko odnośnie pierwszego elementu z listy. Wiem, że rozwiązanie jest z pewnością banalne, ale nie mogłem nic sensownego znaleźć, lub po prostu źle googluję. querySelectorAll nie rozwiązuje problemu, gdyż wtedy każdy tekst rozwija się przy kliknięciu któregokolwiek elementu z listy. Myślałem, nad stworzeniem jakiejś tablicy, i umieszczeniu w niej elementów z listy, ale nie wiem czy w ogóle jest coś takiego możliwe.

var head_text = document.querySelector(".page-list-el");
var text = document.querySelector(".page-list-text");
var text_all = document.querySelectorAll(".page-list-text");

$(document).ready(function ()
{
    $(text_all).hide();
});

$(head_text).click(function ()
{
    $(text).slideToggle();
});
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Nie mieszaj pure JS-a z jQuery, bo później wychodzą takie problemy

Pomijając dość problematyczną strukturę DOM-u, to... `.querySelector()` pobierze tylko pierwszy element o danej klasie - dlatego zaleca się używania go jedynie dla ID, bo element o danym ID może być tylko JEDEN na stronę. Jakbyś użył `$('.page-list-el')`, to złapałbyś od razu wszystkie takie elementy.

  • Lubię to! 4
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...