Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    52

    filter jquery con select

    Salve, ho questo codice che fa da filtro. Come posso fare per renderlo compatibile a filtrare i due blocchi in modo separato?
    E' necessario mettere due script diversi con id e classi diverse oppure si può modificare soltanto?
    grazie a chi mi aiuterà

    1° blocco
    codice HTML:
    <select id="filtro-select">
        <option value="all" selected>all</option>
        <option value="giallo">giallo</option>
        <option value="rosso">rosso</option>
        <option value="verde">verde</option>
    </select>
    <div class="giallo item">giallo</div>
    <div class="rosso item">rosso</div>
    <div class="rosso item">rosso</div>
    <div class="verde item">verde</div>
    2° blocco
    codice HTML:
    <select id="filtro-select">
        <option value="all" selected>all</option>
        <option value="blu">blu</option>
        <option value="grigio">grigio</option>
        <option value="viola">viola</option>
    </select>
    <div class="blu item">blu</div>
    <div class="grigio item">grigio</div>
    <div class="grigio item">grigio</div>
    <div class="viola item">viola</div>
    codice HTML:
    <script>
    $('#filtro-select').on('change', function() {
        $('.item').hide();
        $('.tooltip-itemsList').fadeOut(0);
        var select = $('#filtro-select').val();
           
        select = select == "all" ? "item" : select;
        
        $('.item').each(function() {
            var $this = $(this);
            if ($this.is('[class*=' + select + ']')) {
                $this.fadeIn();
            }
        });
    });
    </script>

  2. #2
    Semplicemente, tutti i nomi e le classi devono essere differenti tra le due occorrenze: filtro-select1/filtro-select2 , item1/item2, dopodiché dovrai ripetere due volte lo script, naturalmente modificando ciascuna copia perché non usi più filtro-select e item, ma le nuove.
    "Le uniche cose che sbagli sono quelle che non provi a fare."
    Atipica

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.