Après avoir testé diverses solutions trouvées ici et sur le reste de la bande, je ne peux pas comprendre la logique pour le faire la manière "simple" (ou le faire fonctionner du tout).
J'ai la liste suivante : P>
var stores = $('.store-list');
$('button.b').on('click', function(){
stores.find('li[data-categories!="Ties"][data-categories!="Shoes"]').fadeOut();
});
4 Réponses :
Essayez ceci:
p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="store-list">
<li data-categories="Bags Shoes Accessories Belts">
<h3 itemprop="name">Enzo Poli</h3>
</li>
<li data-categories="Womenswear">
<h3 itemprop="name">Ilse Jacobsen</h3>
</li>
<li data-categories="Menswear Womenswear Shoes Ties">
<h3 itemprop="name">Kiman (Shoes Ties)</h3>
</li>
<li data-categories="Menswear Womenswear Shoes Knitwear">
<h3 itemprop="name">Riccovero</h3>
</li>
</ul>
<button class="a">Ties</button>
<button class="b">Ties & Shoes</button>
<button class="c">Menswear</button>
Maintenant, nous vérifions si catégories de données contient A ou B à l'aide de ~ = . Comment irais-je si je veux avoir a et b ?
@Steven Supprimer la virgule dans [Catégories de données ~ = "Travaux"], [Catégories de données ~ = "Chaussures"] et utilisez [Catégories de données ~ = "Liens"] [ Catégories de données ~ = "Chaussures"] et vérifie A et B pendant que la virgule il vérifie a ou b
C'est ce que j'utilise maintenant, mais il sélectionne n'importe quel magasin qui possède des chaussures de Menswear ou . Not Menswear et chaussures.
à aucun point de faire utiliser Aucun des catagoires de données n'utilise une valeur unique, alors vérifiez que https://apl.jquery.com/attribute-contains-Wordselector /
[Joel a fourni une réponse avec code, alors arrêtez-vous ici] .fadein () - alors une fois qu'ils sont partis, ils sont partis.
= ou ! = ne donnera jamais une correspondance exacte, utilisez ~ = Pour faire correspondre des mots:
Je pense que l'idée fausse de blâmer ici est que les données - * attributs fonctionnent comme des classes dans la séparation de grandes valeurs par espaces. Vous ne pouvez pas, vous ne pouvez pas simplement définir l'ARBTIRARY une meilleure approche pourrait être en fait Utilisez des classes au lieu d'un attribut de données, vous pouvez facilement effectuer des sélections en fonction de ne pas avoir une classe. Catégories de données à une seule chaîne contenant des espaces, telle que tente de faire correspondre à une seule catégorie donnée ne fonctionnera probablement pas. Désactivé, vous pouvez faire boucle à travers tous les éléments et motif-correspondant à l'attribut Catégories de données sur votre cible, comme:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="store-list">
<li data-categories="Bags Shoes Accessories Belts">
<h3 itemprop="name">Enzo Poli</h3>
</li>
<li data-categories="Womenswear ">
<h3 itemprop="name">Ilse Jacobsen</h3>
</li>
<li data-categories="Menswear Womenswear Shoes Ties">
<h3 itemprop="name">Kiman (Shoes Ties)</h3>
</li>
<li data-categories="Menswear Womenswear Shoes Knitwear">
<h3 itemprop="name">Riccovero</h3>
</li>
</ul>
<button class="a">Ties</button>
<button class="b">Ties & Shoes</button>
<button class="c">Menswear</button>Salut! Votre réponse peut être plus utile pour l'astucher de la question et la communauté en général si vous fournissez un contexte sur la manière dont votre réponse résoudra la question dans la question. Stackoverflow.com/help/how-to-answer
Bien que tous les travaux d'une ligne d'une ligne, vous pouvez voir comment les éléments sont montrés avant de se cacher. Cela rend la liste "saut" alors que la solution de Joel fait cela lisse.
On s'attend à ce que l'on puisse afficher uniquement un élément
LI au clic de?Non, j'ai environ 13 catégories. Si je sélectionne 3 catégories, tous les éléments ayant ces catégories seront affichés. Tout le reste devrait être caché.
Essayez d'utiliser
.filter () ; Bien que cela puisse remplacer l'ajout dedata - * àbouton pour tester les touches.innerhtml