Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „jQuery Script von show/hide auf toggle() umbauen“

mr_otin

Noch nicht viel geschrieben

Guten Morgen,

ich benötige Hilfe bei diesem Beispielscript: https://jsfiddle.net/mr_otin/ctcsn2g8/1/. Es soll von show/hide auf die Toggle Eigenschaft umgebaut werden. Es werden anfangs "Alle" Bilder angezeigt, klicke ich auf Premiere League sollen nur die Premiere League angezeigt werden, klicke ich nochmals darauf sollen wieder alle angezeigt werden. Wie realisiere ich das per toggle, so das der Button/Link "All" verschwindet?

Danke schonmal im voraus

Gruss
Dave
 

Myhar

Hat es drauf

Wieso wird die Liste der einzelnen Clubs nicht als Liste realisiert?
Im Prinzip musst du es so machen: Bei einem Klick suchst du dir die Elemente wie bisher raus und verwendest statt .hide() eben ein toggle. Du musst dir natürlich überlegen wie du es realisieren willst wenn du eine Liga ausgewählt hast und dann die andere auswählst. Dann kannst du nicht einfach togglen sondern dann musst du zuerst alle anzeigen oder alle verstecken (ich würde zu verstecken raten, das dürfte weniger auffallen)
 

mr_otin

Noch nicht viel geschrieben

Hallo MyHar,

danke für deinen Lösungsansatz! Bin grad im "Try and Error" Einsatz ;). Es ist nicht vorgesehen doppelt zu Filtern. Soll heissen: Wenn ich auf Premier League klicke sollen die anderen Button/Links nix tun. Nur wenn ich halt wieder auf Premier League klicke zeig mir wieder alles an. Also an AN/AUS Schalter ohne Parallel-Verknüpfung :D

Gruss
Dave
 

Myhar

Hat es drauf

Also doch anders, als in deinem ersten Post beschrieben: Da möchtest du ja nur den "alle" Button entfernen. Aber du musst dann nur feststellen, ob ein button aktiv ist (da setzt du ja eine Klasse, wenn er gedrückt ist), und wenn das der Fall ist, dann machst du einfach gar nichts.
 

mr_otin

Noch nicht viel geschrieben

@Myhar,

habe es mit deinem Lösungsansatz zum laufen bekommen!

Das Script:
Javascript:
$(document).ready(function() {
    $('#filterOptions li a').click(function(){
       
$('#filterOptions li a').click(function(){
        var ourClass = $(this).attr('class');
        $('#filterOptions li').removeClass('active');
        $(this).parent().addClass('active');
       
        $('#ourHolder').children('div:not(.' + ourClass + ')').toggle();
    });
});
 
Zuletzt bearbeitet:

mr_otin

Noch nicht viel geschrieben

Eine elegantere Lösung ist es noch einen Filter Reset einzubauen, wenn ein anderer Link/Button geklickt wird, setze auf Standard zurück und zeig mir dann das Ergebnis vom anderen Button/Link an.
 

Myhar

Hat es drauf

Das ist ja das, was ich vorhin gemeint habe und wo du sagtest, das brauchst du nicht? Aber gerne nochmal: Wenn du das so haben willst, dann verstecke zuerst alle Elemente (mit hide) und dann togglest du alle Elemente, die angezeigt werden sollen, ein.
 

mr_otin

Noch nicht viel geschrieben

Zu früh gefreut. Ich habe das ganze jetzt in Foundation 6 Framework eingebaut und das Script wird auch ausgeführt. Drücke ich jedoch einen der Button/Links werden mir keine Bilder mehr angezeigt. Ich sehe in den Entwicklertools in den Elementen das sich die klasse auf active setzt jedoch nix angezeigt wird.
 

mr_otin

Noch nicht viel geschrieben

HTML Datei:

HTML:
<!doctype html>
<html class="no-js" lang="en">
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="css/template.css" />
    </head>
<body>

    <div class="small-12 medium-12 large-12 columns">
        <ul id="filterOptions" class="vertical medium-horizontal menu">
            <li><a href="#" class="vtwin" id="segmentVtwin">V-Twin</a></li>
            <li><a href="#" class="street" id="segmentStreet">Street</a></li>
            <li><a href="#" class="offroad"  id="segmentOffroad">Offroad</a></li>
            <li><a href="#" class="atv"  id="segmentAtv">Atv</a></li>
            <li><a href="#" class="snow"  id="segmentSnow">Snow</a></li>
            <li><a href="#" class="watercraft"  id="segmentWatercraft">Watercraft</a></li>
        </ul>
    </div>

    <div class="small-12 medium-12 large-12 columns" style="margin-top: 30px;">
        <!-- Anzahl der Bilder pro Reihe im breakpoinT -->

        <div id="ourHolder">
            <div class="row small-up-1 medium-up-2 large-up-4">

                <div class="column">
                    <div class="katalog item street offroad atv">
                        <header>100% Eyewear</header>
                        <img class="thumbnail" src="img/100percent-eyewear.jpg" alt="100% Eyewear">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad atv">
                        <header>100% Gloves</header>
                        <img class="thumbnail" src="img/100percent-gloves.jpg" alt="100% Gloves">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad atv">
                        <header>100%</header>
                        <img class="thumbnail" src="img/100percent.jpg" alt="100%">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item street offroad">
                        <header>AFX</header>
                        <img class="thumbnail" src="img/afx.jpg" alt="AFX">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad">
                        <header>Alpinestars</header>
                        <img class="thumbnail" src="img/alpinestars.jpg" alt="Alpinestars">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item snow">
                        <header>Arctiva</header>
                        <img class="thumbnail" src="img/arctiva.jpg" alt="Arctiva">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item street">
                        <header>Athena</header>
                        <img class="thumbnail" src="img/athena-race-gaskets.jpg" alt="Athena">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item atv">
                        <header>ATV</header>
                        <img class="thumbnail" src="img/atv.jpg" alt="ATV">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad">
                        <header>Blackbird</header>
                        <img class="thumbnail" src="img/blackbird.jpg" alt="Blackbird">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item vtwin">
                        <header>Fatbook</header>
                        <img class="thumbnail" src="img/fatbook.jpg" alt="Fatbook">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item vtwin street">
                        <header>Icon Fall</header>
                        <img class="thumbnail" src="img/icon-fall.jpg" alt="Icon Fall">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog vtwin street">
                        <header>Icon Spring</header>
                        <img class="thumbnail" src="img/icon-spring.jpg" alt="Icon Fall">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad atv">
                        <header>Moose Racing</header>
                        <img class="thumbnail" src="img/moose-racing.jpg" alt="Moose Racing">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad atv">
                        <header>Moose Utility Division</header>
                        <img class="thumbnail" src="img/moose-utitlity.jpg" alt="Moose Utility Division">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad">
                        <header>Neken</header>
                        <img class="thumbnail" src="img/neken.jpg" alt="Neken">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad">
                        <header>Offroad</header>
                        <img class="thumbnail" src="img/offroad.jpg" alt="Offroad">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item vtwin">
                        <header>Oldbook</header>
                        <img class="thumbnail" src="img/oldbook.jpg" alt="Oldbook">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item vtwin street">
                        <header>RSD BMW</header>
                        <img class="thumbnail" src="img/rsd-bmw.jpg" alt="RSD BMW">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item vtwin">
                        <header>RSD</header>
                        <img class="thumbnail" src="img/rsd.jpg" alt="RSD">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item watercraft">
                        <header>Slippery</header>
                        <img class="thumbnail" src="img/slippery.jpg" alt="Slippery">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item street">
                        <header>Streetbook</header>
                        <img class="thumbnail" src="img/street.jpg" alt="Streetbook">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item offroad">
                        <header>Thor</header>
                        <img class="thumbnail" src="img/thor.jpg" alt="Thor">
                    </div>
                </div>

                <div class="column">
                    <div class="katalog item vtwin">
                        <header>Trask</header>
                        <img class="thumbnail" src="img/trask.jpg" alt="Trask">
                    </div>
                </div>

            </div>

        </div>
    </div>


    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/what-input.min.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/filter.js"></script>
</body>
</html>

Javascript:

Javascript:
$(document).ready(function() {
    /*$('#filterOptions li a').click(function() {
     // fetch the class of the clicked item
     var ourClass = $(this).attr('class');

     // reset the active class on all the buttons
     $('#filterOptions li').removeClass('active');
     // update the active state on our clicked button
     $(this).parent().addClass('active');

     if(ourClass == 'all') {
     // show all our items
     $('#ourHolder').children('div.item').show();
     }
     else {
     // hide all elements that don't share ourClass
     $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
     // show all elements that do share ourClass
     $('#ourHolder').children('div.' + ourClass).show();
     }
     return false;
     });*/

    $('#filterOptions li a').click(function(){
        var ourClass = $(this).attr('class');
        $('#filterOptions li').removeClass('active');
        $(this).parent().addClass('active');

        $('#ourHolder').children('div:not(.' + ourClass + ')').toggle();
        //$('#ourHolder').children('div.' + ourClass).toggle();
    });
});

anbei wie es aussieht. Vorm Klicken


Nach dem klicken:


Dave
 

mr_otin

Noch nicht viel geschrieben

Guten Morgen,

habe es jetzt hinbekommen, das er mir alles anzeigt. Ich hatte denn falschen Selektor im Filter-Script benutzt!


Wenn du das so haben willst, dann verstecke zuerst alle Elemente (mit hide) und dann togglest du alle Elemente, die angezeigt werden sollen, ein.

Wie realisiere ich das? Per If/Else?

MfG
Dave
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben