मैं jQuery और CSS का उपयोग करके एकाधिक मान वाले एक सूची को फ़िल्टर कैसे कर सकता हूं?

Question

यहां और शेष वेब पर पाए गए विभिन्न समाधानों का परीक्षण करने के बाद, मैं इसे "सरल" तरीका (या इसे बिल्कुल काम करने के लिए) तर्क का पता नहीं लगा सकता।

मैं निम्नलिखित सूची है:

<ul class="store-list"> 
    <li data-categories="Bags Shoes Accessories Belts"> 
     <h3 itemprop="name">Enzo Poli</h3> 
    </li> 
    <li data-categories="Womenswear Shoes"> 
     <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> 

मैं Attribute Not Equal Selector उपयोग करने की कोशिश की है, लेकिन यह निश्चित रूप से काम नहीं करता।

var stores = $('.store-list'); 

$('button.b').on('click', function(){ 
    stores.find('li[data-categories!="Ties"][data-categories!="Shoes"]').fadeOut(); 
}); 

एक और समस्या यह है कि जब मैं एक अलग श्रेणियों का चयन करता हूं, तो छुपा तत्व नहीं दिखाए जाते हैं।

मुझे पता है कि मैं $.each() का उपयोग कर सकता हूं और प्रत्येक तत्व के माध्यम से जा सकता हूं और यह देखने के लिए बहुत सारे कोड का उपयोग कर सकता हूं कि इसमें श्रेणी है या नहीं, यह जांचें या नहीं। लेकिन मैं बस उम्मीद कर रहा था कि एक बेहतर और सरल विकल्प होगा।

तो क्यू है; मैं किस फ़िल्टर का चयन करता हूं, इस आधार पर मैं सूची आइटम कैसे दिखा/छुपा सकता हूं?
See my fiddle here।

Answer 1

इस प्रयास करें:

var stores = $('.store-list'); 
 

 
$('button.a').on('click', function() { 
 
    stores.find('li').not('[data-categories~="Ties"]').fadeOut(); 
 
    stores.find('li[data-categories~="Ties"]').fadeIn(); 
 
}); 
 

 
$('button.b').on('click', function() { 
 
    stores.find('li').not('[data-categories~="Ties"], [data-categories~="Shoes"]').fadeOut(); 
 
    stores.find('li[data-categories~="Ties"], [data-categories~="Shoes"]').fadeIn(); 
 
}); 
 

 
$('button.c').on('click', function() { 
 
    stores.find('li').not('[data-categories~="Menswear"]').fadeOut(); 
 
    stores.find('li[data-categories~="Menswear"]').fadeIn(); 
 
});

body { 
 
    font-size: 0.7em; 
 
} 
 
ul, 
 
li { 
 
    list-style: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
}

<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>

आप देख सकते हैं मैं data~='item'!= के बजाय कि जिस तरह से यह जाँच करता है अगर यह डेटा-विशेषता पर कि शब्द है का उपयोग करें।

इसके अलावा, मैं उन लोगों में फीका लगाता हूं जिनमें श्रेणी है ताकि सभी प्रबंधन किया जा सके। निश्चित रूप से ऐसा करने का एक बेहतर तरीका है, लेकिन यह डिफ़ॉल्ट तर्क है।

Answer 2

.fadeIn() का उपयोग करने के लिए कोई बिंदु नहीं - तो एक बार जब वे चले गए, तो वे चले गए। डेटा-श्रेणियां का

कोई भी एक भी मान का उपयोग करता है, तो = या != के लिए जाँच एक सटीक मिलान देना कभी नहीं होगा, ~= का उपयोग शब्द का मिलान कर:

https://api.jquery.com/attribute-contains-word-selector/

[जोएल कोड के साथ जवाब प्रदान की गई है , तो यहां रोकना]

Answer 3

मुझे लगता है कि यहां दोष लगाने के लिए गलत धारणा यह है कि डेटा- * विशेषताएं रिक्त स्थान से कई मानों को अलग करने में कक्षाओं की तरह काम करती हैं। ऐसा नहीं है, यहां आप केवल एक स्ट्रिंग वाले एक स्ट्रिंग में arbtirary data-categories विशेषता सेट कर रहे हैं, इसलिए किसी दिए गए एकल श्रेणी से मिलान करने का प्रयास शायद काम नहीं करेगा। बेतकल्लुफ़, आप सभी तत्वों और के माध्यम से लूप उनके data-categories विशेषता अपने लक्ष्य के खिलाफ पैटर्न से मेल खा सकते हैं, जैसे:

$('button.a').on('click', function(){ 
    stores.find('li').each(function() { 
     if($(this).attr("data-categories").split(" ").indexOf('Ties') == -1) { 
      $(this).fadeOut(); 
     } 
    }); 
}); 

एक बेहतर दृष्टिकोण एक डेटा विशेषता तथ्य उपयोग वर्गों के बजाय में करने के लिए हो सकता है, तो आप आसानी से कर सकते हैं कक्षा नहीं होने के आधार पर चयन।

Answer 4

var stores = $('ul.store-list > li'); 
 

 
$('button.a').on('click', function(){ 
 
    stores.fadeIn(':hidden').not('li[data-categories~="Ties"]', stores).fadeOut(); 
 
}); 
 

 
$('button.b').on('click', function(){ 
 
    stores.fadeIn(':hidden').not('li[data-categories~="Shoes"], li[data-categories~="Ties"]', stores).fadeOut(); 
 
}); 
 

 
$('button.c').on('click', function(){ 
 
    stores.fadeIn(':hidden').not('li[data-categories~="Menswear"]', stores).fadeOut(); 
 
});

body { 
 
    font-size: 0.7em; 
 
} 
 

 
ul, li { 
 
    list-style: none; 
 
} 
 
a { text-decoration: none; }

<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>