Jeden skrypt dla wielu elementów

Odpowiedz Nowy wątek
2018-05-09 13:07

Rejestracja: 2 lata temu

Ostatnio: 1 rok temu

0

Wiatm,
Mam problem z poprawnym napisaniem skryptu na stronie, skrypt ma odpowiadać za zwijanie i rozwijanie tekstu w blokach na stronie.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="ramka">
        <div class="tekst">
        <p>sample text</p>
        </div>
        <a href="#" class="button">click</a>
    </div>
    <div class="ramka">
        <div class="tekst">
            <p>sample text</p>
        </div>
        <a href="#" class="button">click</a>
    </div>

  <script src="jquery-3.3.1.min.js"></script>
  <script src="js.js"></script>
  </body>
</html>

na początku próbowałem zrobić to w ten sposób:

$('.button').on('click',function(){
$('.tekst').slideToggle(slow)
})

Efekt był taki ze wszystkie ramki aktywowały sie po kliknięciu dowolnego przycisku więc próbowałem zmodyfikować, kod niestety potrzebuje pomocy. poniżej aktualny kod

$(document).ready(function() {
    var frame = document.getElementByClassName('ramka');
    frame = toggleEvent();

});

function toggleEvent(){

    this._button = document.getElementByClassName('button');
    this._cont = document.getElementByClassName('tekst');

    $(button).on("click",function(){
        $(this._cont).slideToggle(slow);
    })

};

Pozostało 580 znaków

2018-05-09 13:17

Rejestracja: 5 lat temu

Ostatnio: 6 godzin temu

1
$('.button').on('click',function(){
    $('.tekst').slideToggle(slow)
})

To jest selektor dla klasy. Teraz zaznaczasz wszystkie elementy które mają klasę tekst. A że masz ich kilka, to i akcja jest dla kilku wywoływana ;)
Możesz na przykład wybrać klasę tekst, ale najbliższą przyciskowi który został wciśnięty, a nie wszystkie. Będzie działać :)

Pozostało 580 znaków

2018-05-09 13:23

Rejestracja: 2 lata temu

Ostatnio: 1 rok temu

0

Jakieś wskazówki jak to zrobić?

Pozostało 580 znaków

2018-05-09 13:40
Moderator

Rejestracja: 12 lat temu

Ostatnio: 3 minuty temu

Lokalizacja: Wrocław

0

https://api.jquery.com/closest/ na przykład.


Pozostało 580 znaków

2018-05-09 14:37

Rejestracja: 2 lata temu

Ostatnio: 1 rok temu

1
$(document).ready(function() {
    toggleEvent();
});

function toggleEvent(){

    $('.button').on('click',function(){
    $(this).prev().slideToggle('slow')
})  
};

tak mi sie udało

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0