[php] Filtre de page de la case à cocher multiple jQuery


Answers

J'ai changé un peu la solution de Matt pour qu'elle fasse ce que vous avez demandé. Au moins, comment je l'ai interprété (montrant seulement les éléments qui correspondent à toutes les catégories sélectionnées). Ce n'est en aucun cas aussi élégant que la solution de Matt:

Le HTML:

<div class="tags">
    <label><input type="checkbox" data-category="arts" /> Arts </label>
    <label><input type="checkbox" data-category="computers" /> Computers </label>
    <label><input type="checkbox" data-category="health" /> Health </label>
    <label><input type="checkbox" data-category="video-games" /> Video Games </label>
</div>

<ul class="results">
    <li data-category="arts computers">
        Result 1
    </li>
    <li data-category="video-games">
        Result 2
    </li>
    <li data-category="computers health video-games">
        Result 3
    </li>
    <li data-category="arts video-games">
        Result 4
    </li>
</ul>

Et le JS:

$('div.tags').delegate('input:checkbox', 'change', function() {
    $('.results > li').hide();

    var selector = $('input:checked').map(function() {
        return $(this).attr('data-category');
    }).get();

    function matchesCategories(elem) {
        var elemCats = elem.attr('data-category');

        if (elemCats) {
            elemCats = elemCats.split(' ');
        } else {
            elemCats = Array();
        }
        for (var i = 0; i < selector.length; i++) {
            console.log("testing " + selector[i] + " in:");
            console.log(elemCats);
            if (jQuery.inArray(selector[i], elemCats) == -1) {
                return false;
            }
        }
        return true;
    }
    $('.results > li').each(function(i, elem) {
        if (matchesCategories(jQuery(elem))) {
            $(elem).show();
        }
    });

}).find('input:checkbox').change();

Si vous voulez l'essayer, voici mon entrée jsfiddle (fourchue de Matt)

Question

J'ai essayé de comprendre comment le faire correctement et je n'arrive pas à le faire fonctionner.

Je veux utiliser jQuery pour sélectionner et choisir ce que je veux montrer sur une page. J'ai regardé et essayé de trouver un script, un peu travaillé mais pas vraiment comme je le voulais.

La page utilisera des cases à cocher comme "tags", disons arts, ordinateurs, santé, jeux vidéo

 <div class="tags">
 <label><input type="checkbox" class="arts" /> Arts </label>
 <label><input type="checkbox" class="computers" /> Computers </label>
 <label><input type="checkbox" class="health" /> Health </label>
 <label><input type="checkbox" class="video-games" /> Video Games </label>
 </div>

Ensuite, sur la page, il y aura des résultats et chaque résultat est associé à des balises.

 <ul class="results">
 <li class="arts computers">
     Result 1
 </li>
 <li class="video-games">
     Result 2
 </li>
 <li class="computers health video-games">
     Result 3
 </li>
 <li class="arts video-games">
     Result 4
 </li>
 </ul>

Je veux être capable de cliquer sur les arts et les jeux vidéo et il affichera tout ce qui a à la fois des arts et des jeux vidéo, donc le résultat 4. Ou être capable de simplement choisir des ordinateurs et de récupérer les résultats 1 et 3.

Je pensais que je pouvais faire quelque chose dans la ligne de

 $('.tags input').click( function() {
      $('.results > li').hide();
      //For each one checked
      $('input').is(':checked').each( function() {
           //Display that result
           $('.results li').hasClass($(this).attr('class')).show();
      });      
 });

mais ça ne marche pas, ça cache tout mais ne revient pas pour montrer le reste. Je sais que la logique est complètement fausse, je ne pense pas que je suis supposé utiliser le chacun de cette façon? Peut-être l'utiliser pour saisir toutes les classes dans un tableau puis montrer les li qui ont ces classes?

Des idées?




Deux problèmes

  1. Sélecteur d'entrée - .is est une fonction, pas un sélecteur.
  2. hasClass - également pas un sélecteur.

Ceux-ci renvoient tous deux true ou false donc vous ne pouvez pas utiliser leurs résultats comme un objet jQuery.

http://jsfiddle.net/5z7M5/3/

 $('.tags input').click( function() {
      $('.results > li').hide();
      //For each one checked
      $('input:checked').each( function() {

           $('.'+$(this).attr('class')).show();
      });      
 });





Related