Tani hosting

Wyświetlanie divów jQuery, odzielenie divów
BienuSS Offline
Użytkownik

Liczba postów: 1
Reputacja: 0
Post: #1
Wyświetlanie divów jQuery, odzielenie divów 07-11-2017 16:58
Witam 
Mam aktualnie skrypt który służy do chowania i pokazywania divów, ale chodzi o to że zamiast pokazywać tylko jeden div rozwija mi wszystkie, i nie mam pojęcia jak to odróżnić

Jak wygląda układ divów:
Kod:
<div id="match1" class="match">

xxxxxxxxxxxxxxxxx
<button>Rozwiń</button>
    <div id="match1add1" class="matchadd">AAAAAAAA</div>
    <div id="match1add2" class="matchadd">AAAAAAAA</div>
    <div id="match1add3" class="matchadd">AAAAAAAA</div>
    <div id="match1add4" class="matchadd">AAAAAAAA</div>

<div id="match2" class="match">
xxxxxxxxxxxxxxxxx
<button>Rozwiń</button>
    <div id="match1add1" class="matchadd">AAAAAAAA</div>
    <div id="match1add2" class="matchadd">AAAAAAAA</div>
    <div id="match1add3" class="matchadd">AAAAAAAA</div>
    <div id="match1add4" class="matchadd">AAAAAAAA</div>

<div id="match3" class="match">
xxxxxxxxxxxxxxxxx
<button>Rozwiń</button>
    <div id="match1add1" class="matchadd">AAAAAAAA</div>
    <div id="match1add2" class="matchadd">AAAAAAAA</div>
    <div id="match1add3" class="matchadd">AAAAAAAA</div>
    <div id="match1add4" class="matchadd">AAAAAAAA</div>

<div id="match4" class="match">
xxxxxxxxxxxxxxxxx
<button>Rozwiń</button>
    <div id="match1add1" class="matchadd">AAAAAAAA</div>
    <div id="match1add2" class="matchadd">AAAAAAAA</div>
    <div id="match1add3" class="matchadd">AAAAAAAA</div>
    <div id="match1add4" class="matchadd">AAAAAAAA</div>


Mój aktualny kod którego uzywam: (ale w tym wypadku w każdym dive każdego "match" musiała by być inna nazwa i napewno jest to nie praktyczne

Kod:
        <div id="match1" class="match">

            <script type="text/javascript">
                document.addEventListener("DOMContentLoaded", function() {
                    var more = document.getElementById('more-option');
                        more.addEventListener('click', function(e) {
                            e.preventDefault();
                                   document.querySelectorAll('#match1-add1, #match1-add2, #match1-add3, #match1-add4').forEach(function(i,v) {
                            i.classList.toggle('show');
                           });
                       })
                });
            </script>


i chce to jakoś przerobić na to:

Kod:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("div.match1").ready(function(){
$("button").click(function(){
$(".matchadd").toggle(1000);
});
</script>

Tutaj znalazłem coś takiego ale napisane w samym Javascripcie
https://jsfiddle.net/Le52tu67/
(Ten post był ostatnio modyfikowany: 07-11-2017 17:42 przez BienuSS.)
Cytuj
Diabeł Online
Użyszkodnik


Liczba postów: 777
Reputacja: 666


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości