nicht benötigte Headlines ausblenden

R6-Rennmaus · 20. April 2019

Auf einer Webseite verwende ich einen JavaScript "data-filter" um bestimmte DIV-Kontainer auszublenden (s.u.)

Es gibt Headlines (in dem Beispiel <h2>), die dann manchmal nicht benötigt werden und ausgeblendet werden sollen.

Leider kenne ich mich mit JavaSript überhaupt nicht aus und weiß gar nicht, wie ich das Problem lösen soll.

Die in dem Beispiel verwendeten Scripte habe ich mir aus dem Internet kopiert und eingebaut.

Am liebsten würde ich das mit CSS lösen, jedoch muss ja hier eine Abfrage erfolgen. Daher muss ich das wohl mit JavaScript lösen, oder?

Kann mir jemand helfen?

Code

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){     
                    $('.buttons a').click(function(){
                        $('.container').hide();
                        var sAttr = $(this).attr("data-filter");
                        if (sAttr == 'all')
                            $('.container').show();
                        else
                            $('.' + sAttr).show();
                        return false;
                    }); 
                });
    </script>

</head>

<body>
    <h1>Filter:</h1>

    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp; 
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp; 
        <a data-filter="maus">Maus</a>
    </div>

    <h2>Hunde</h2>

    <div class="container hund">
            <h3>Hund 1</h3>
    </div>   

    <div class="container hund">
            <h3>Hund 2</h3>
    </div>  


    <h2>Katze</h2>

    <div class="container katze">
            <h3>Katze 1</h3>
    </div>   


    <div class="container katze">
            <h3>Katze 2</h3>
    </div>   


    <h2>Maus</h2>

    <div class="container maus">
            <h3>Maus 1</h3>
    </div>   

    <div class="container maus">
            <h3>Maus 2</h3>
    </div>

</body>

Alles anzeigen

m.scatello · 20. April 2019

Zitat von R6-Rennmaus

Es gibt Headlines (in dem Beispiel <h2>), die dann manchmal nicht benötigt werden und ausgeblendet werden sollen.

Mir stellt sich die Frage, warum diese dann überhaupt vorhanden sind. Welche Kriterien gibt es, wenn sie ausgeblendet werden sollen? Lässt sich das nicht besser serverseitig mit PHP regeln?

R6-Rennmaus · 21. April 2019

Sobald man in dem Beispiel den Filter "Katzen" anwendet, werden die Einträge "Hund 1", "Hund 2", "Maus 1" und "Maus 2" ausgeblendet. Die Überschriften "Hunde" und "Maus" (<h2>) bleiben jedoch stehen.

Und diese nicht benötigten Überschriften möchte ich auch ausblenden, wenn kein nachfolgender <div>-Container angezeigt wird.

Sempervivum · 21. April 2019

Das lässt sich leicht machen: Gib den Überschriften ebenfalls die geeigneten Klassen und beziehe dies beim Ausblenden ein:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.buttons a').click(function () {
                $('.container, .headline').hide();
                var sAttr = $(this).attr("data-filter");
                if (sAttr == 'all')
                    $('.container').show();
                else
                    $('.' + sAttr).show();
                return false;
            });
        });
    </script>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp;
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp;
        <a data-filter="maus">Maus</a>
    </div>
    <h2 class="headline hund">Hunde</h2>
    <div class="container hund">
        <h3>Hund 1</h3>
    </div>
    <div class="container hund">
        <h3>Hund 2</h3>
    </div>
    <h2 class="headline katze">Katze</h2>
    <div class="container katze">
        <h3>Katze 1</h3>
    </div>
    <div class="container katze">
        <h3>Katze 2</h3>
    </div>
    <h2 class="headline maus">Maus</h2>
    <div class="container maus">
        <h3>Maus 1</h3>
    </div>
    <div class="container maus">
        <h3>Maus 2</h3>
    </div>
</body>

</html>

Alles anzeigen

Sempervivum · 21. April 2019

BTW: Möglicher Weise lässt sich das Ganze noch vereinfachen und übersichtlicher machen, wenn Du das HTML etwas anders arrangierst und jeweils eine Tiergruppe in einen übergeordneten Container legst:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.buttons a').click(function () {
                $('.container').hide();
                var sAttr = $(this).attr("data-filter");
                if (sAttr == 'all')
                    $('.container').show();
                else
                    $('.' + sAttr).show();
                return false;
            });
        });
    </script>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp;
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp;
        <a data-filter="maus">Maus</a>
    </div>
    <section class="container hund">
         <h2>Hunde</h2>
        <h3>Hund 1</h3>
        <h3>Hund 2</h3>
    </section>
    <section class="container katze">
         <h2>Katzen</h2>
        <h3>Katze 1</h3>
        <h3>Katze 2</h3>
    </section>
    <section class="container maus">
         <h2>Mäuse</h2>
        <h3>Maus 1</h3>
        <h3>Maus 2</h3>
    </section>
</body>

</html>

Alles anzeigen

Sempervivum · 21. April 2019

Ich sehe gerade, dass Du auch nach einer Lösung mit CSS gefragt hast. Ist auch kein Problem, aber dann wird es unübersichtlicher und weniger änderungsfreundlich:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <style>
        input {
            display: none;
        }

        section.container {
            display: none;
        }

        input#all:checked~section {
            display: block;
        }

        input#hund:checked~section.hund {
            display: block;
        }

        input#katze:checked~section.katze {
            display: block;
        }

        input#maus:checked~section.maus {
            display: block;
        }
    </style>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <label for="all">Alle</label>
        <label for="hund">Hund</label>
        <label for="katze">Katze</label>
        <label for="maus">Maus</label>
    </div>
    <input type="radio" name="rdgroup" id="all" checked>
    <input type="radio" name="rdgroup" id="hund">
    <input type="radio" name="rdgroup" id="katze">
    <input type="radio" name="rdgroup" id="maus">
    <section class="container hund">
         <h2>Hunde</h2>
        <h3>Hund 1</h3>
        <h3>Hund 2</h3>
    </section>
    <section class="container katze">
         <h2>Katzen</h2>
        <h3>Katze 1</h3>
        <h3>Katze 2</h3>
    </section>
    <section class="container maus">
         <h2>Mäuse</h2>
        <h3>Maus 1</h3>
        <h3>Maus 2</h3>
    </section>
</body>

</html>

Alles anzeigen

nicht benötigte Headlines ausblenden

Jetzt mitmachen!

Teilen

Tags