11521 sujets

JavaScript, DOM et API Web HTML5

Fonction de tri

Bonjour à tous !

Depuis quelques jours, je dois terminer un petit test de HTML/CSS et JS/jQuery. Si reproduire une maquette n'a posé aucun soucis, je bloque totalement sur le jQuery. C'est pourtant quelque chose de simple : une fonction de tri. Il y a plein d'images, je clique sur le bouton blanc, les images blanches restent et les autres disparaissent, et inversement. Le souci, c'est qu'on m'a fourni un code et je dois impérativement faire avec. Il est clairement dit qu'il y a une erreur mais même si je me creuse les méninges, je suis bloquée. J'en appel donc à vous pour essayer de débloquer tout ceci. D'avance, je vous remercie Smiley biggrin 

$(function() {
    $('[data-filter-cat]').click(function() {
        var choosenCat = $(this).data('filter-cat');

        console.log('click');
        console.log(choosenCat);

        $('[data-filter-cat]').each(function(e){
            $(this).parent().removeClass('active');
        });
        $(this).parent().addClass('active');

        if(choosenCat = 'all') {
            $('[data-cat]').each(function(){
                $(this).removeClass('hidden');
            });
        }
        else {
            $('[data-cat]').each(function(e){
                if($(this).data('filter-cat') == choosenCat){
                    $(this).removeClass('hidden');
                }else{
                    $(this).addClass('hidden');
                }
            });
        }
        return false;
    });
});



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.min.css">
    <link rel="stylesheet" href="css/yourstyles.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</head>
<body>
<div class="site-container">
    <header class="header">
        <div class="header-top">
            <div class="header-top__logo">
                <img src="img/placeholder-logo-2.png">
            </div>
            <div class="header-top__infos">
                <p class="text-regular">1 (555) 555-5555</p>
            </div>
        </div>
        <div class="header__main-menu">
            <nav>
                <ul>
                    <li>

                    </li>
                    <li>
                         <a href="#" title="Accueil"> <img src="img/picto-home-3.png" alt="bouton bouton home"> Accueil</a>
                    </li>
                    <li>
                        <a href="#" title="Item menu 1">Véhicules neufs</a>
                    </li>
                    <li>
                        <a href="#" title="Item menu 1">Véhicules d'occasion</a>
                    </li>
                    <li>
                        <a href="#" title="Item menu 1">Offres spéciales</a>
                    </li>
                    <li id="Item__sous-menu">
                        <a href="#" title="Item menu 2">Pièces et services</a>
                        <ul class="dropdown">
                            <li><a href="#" title="Item submenu 1">Centre du pneu</a></li>
                            <li><a href="#" title="Item submenu 2">Esthétique</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" title="Item menu 3">Financement</a>
                    </li>
                    <li>
                        <a href="#" title="Item menu 4">Contactez-nous</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="boutons">
        <h2 class="title">Sections boutons</h2>
        <a href="#">Bouton 1</a>
        <a href="#">Bouton 2</a>
    </section>

    <section class="listing-vehicles">
        <h2 class="title">Systeme de tri</h2>

        <ul class="listing-vehicles__filters">
            <li class="listing-vehicles__filters-item active" title="Tous"><span data-filter-cat="all">Tous</span></li>
            <li class="listing-vehicles__filters-item" title="Noir"><span data-filter-cat="black">Noir</span></li>
            <li class="listing-vehicles__filters-item" title="Blanc"><span data-filter-cat="white">Blanc</span></li>
        </ul>

        <div class="listing-vehicles">
            <div class="listing-vehicles__element" data-cat="black">
                <img src="http://placehold.it/170x135/000000">
                <p>Lorem ipsum</p>
            </div>
            <div class="listing-vehicles__element" data-cat="white">
                <img src="http://placehold.it/170x135/ffffff">
                <p>Lorem ipsum</p>
            </div>
            <div class="listing-vehicles__element" data-cat="white">
                <img src="http://placehold.it/170x135/ffffff">
                <p>Lorem ipsum</p>
            </div>
            <div class="listing-vehicles__element" data-cat="black">
                <img src="http://placehold.it/170x135/000000">
                <p>Lorem ipsum</p>
            </div>
            <div class="listing-vehicles__element" data-cat="black">
                <img src="http://placehold.it/170x135/000000">
                <p>Lorem ipsum</p>
            </div>
            <div class="listing-vehicles__element" data-cat="white">
                <img src="http://placehold.it/170x135/ffffff">
                <p>Lorem ipsum</p>
            </div>
            <div class="listing-vehicles__element" data-cat="black">
                <img src="http://placehold.it/170x135/000000">
                <p>Lorem ipsum</p>
            </div>
            <div class="listing-vehicles__element" data-cat="white">
                <img src="http://placehold.it/170x135/ffffff">
                <p>Lorem ipsum</p>
            </div>
        </div>
    </section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script async src="js/main.js"></script>
</body>
</html>
Administrateur
Bonjour et bienvenue, Smiley smile

en ne faisant que parcourir des yeux ton code, je détecte une erreur extrêmement commune : dans le if il y a un "=" affectant la chaîne 'all' à la variable située à gauche alors que tu veux faire une comparaison avec un double ou triple égal Smiley cligne
Ajoute un 
if(choosenCat = 'all') {
  console.log(choosenCat);
  // …
}

pour constater le souci.

Si tu en as la possibilité, ajoute un (js)linter à ton éditeur de texte, ça te sauvera quelques "typos" aux graves conséquences comme celle-là Smiley smile
Administrateur
Voici le code rectifié : https://codepen.io/anon/pen/XaVEJx

Voir lignes 15-20 dans le code JavaScript.

Par contre je ne suis pas fan de rendre des <span> cliquables, il vaudrait mieux utiliser des <input type="button">, voire <a>. Au moins ils peuvent recevoir le focus.
Sujet clos
Aller à