jQuery Script von show/hide auf toggle() umbauen

mr_otin · 15.02.2016

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 · 15.02.2016

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 · 15.02.2016

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

Gruss
Dave

Myhar · 15.02.2016

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 · 15.02.2016

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

mr_otin · 15.02.2016

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 · 15.02.2016

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 · 15.02.2016

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.

Myhar · 15.02.2016

Dann ist das CSS nicht gesetzt? Ohne genaue Angaben kann man da nicht weiterhelfen....

mr_otin · 15.02.2016

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:

$(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 · 16.02.2016

Guten Morgen,

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

Myhar schrieb:
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