Nicht angeklicktes Element aus li auf hide setzten?

burn4ever · 5 November 2012

Hallo,
ich habe eine Liste wo standartmässig das erste Element eingeblendet wird. Bei 'click' soll das jeweilige li eingeblendet werden und alle anderen ausgeblendet.

Das einblenden ist kein Problem doch wie kann ich alle anderen Elemente (aus der Klasse .super-2) ausblenden?

Hier mal mein bishereiger Code:

PHP:

            $('li', '#super').click(
                function(e) {
                        var kind = $(this).index() + 1;
                        $('.super-2 li:nth-child(' + (kind) + ')').show();

                }
            );

Tronjer · 5 November 2012

Die Frage ist insofern nicht eindeutig, als dass man auf ein ausgeblendetes List-Item anschließend nicht mehr klicken kann um es einzublenden.

Aber um das vom Ansatz her an einem abgewandelten Fall zu erklären.

- Du iterierst erst über sämtliche Elemente einer Auswahl und weist diesen eine Eigenschaft zu.
- Danach wird für das angeklickte Element die Eigenschaft wieder aufgehoben.

Die if-Afrage mit dem hasClass() wäre in nachfolgendem Beispiel natürlich unnötig. Man könnte sich hier auf den List-Selektor beschränken.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Dummy</title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li class="super-2">First Item</li>
        <li class="super-2">Second Item</li>
        <li class="super-2">Third Item</li>
        <li class="super-2">Fourth Item</li>
    </ul>
    
    <script type="text/javascript">
        $('li').click(function() {
            $('li').each(function(i) {
                if ($(this).hasClass('super-2')) {
                    $(this).css('color', 'red');
                };
            });
                $(this).css('color', 'blue');
        });
    </script>
</body>
</html>

Nicht angeklicktes Element aus li auf hide setzten?

burn4ever

Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge