Jump to content
jacobWeb

Wyświetlanie poszczególnych elementów

Recommended Posts

jacobWeb

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();
});

 

Share this post


Link to post
Share on other sites
jacobWeb
Posted Original Poster

Dokładnie tak, wielkie dzięki 🙂

Share this post


Link to post
Share on other sites
-n3veR

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.

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...