jQuery Filterelemente basierend auf Datenattribut

Question

Ich habe eine Reihe von Kontrollkästchen und wählen Sie Liste, die zum Filtern von Elementen verwendet werden.

Hier ist mein html:

<div id="users"> 
    <input name="user" type="checkbox" value="1"> 
    John 
    <input name="user" type="checkbox" value="2"> 
    Mike 
    <input name="user" type="checkbox" value="3"> 
    Peter </div> 

<select name="products"> 
    <option value="4">Product 1</option> 
    <option value="5">Product 2</option> 
    <option value="6">Product 3</option> 
</select> 

<ul id="items"> 
    <li data-filter="1">Item 1</li> 
    <li data-filter="2">Item 2</li> 
    <li data-filter="1">Item 3</li> 
    <li data-filter="3">Item 4</li> 
</ul> 

und hier ist javascript:

$('select[name=products]').change(function() { 
    var filter = $(this).val(); 
    filterList(filter); 
}); 

//News filter function 
function filterList(value) { 
    var list = $("#items li"); 
    $(list).fadeOut("fast"); 
    if (value == "all") { 
     $("#items").find("li").each(function() { 
      $(this).delay(200).slideDown("fast"); 
     }); 
    } else { 
     $("#items").find("li[data-filter*=" + value + "]").each(function() { 
      $(this).delay(200).slideDown("fast"); 
     }); 
    } 
} 

Mein Problem ist jetzt, Kontrollkästchen sowie einen Teil der Filteroptionen umfassen, aber ich bin nicht sicher, ob die Weg zu gehen. Kann ich Datenfilterwerte trennen wie: data-filter = "1,3", wobei 1 ein Produkt und 3 ein Benutzer ist, oder ein neues Datenattribut vollständig hinzufügen?

Answer 1

neuer Code und Lösung. https://jsfiddle.net/Cuchu/p4w5zbyh/

Html - fügen Klasse 'überprüfen' in den Inputs

<div id="users"> 
    <input class="check" name="user" type="checkbox" value="1"> 
    John 
    <input class="check" name="user" type="checkbox" value="2"> 
    Mike 
    <input class="check" name="user" type="checkbox" value="3"> 
    Peter </div> 

<select name="products"> 
    <option value="4">Product 1</option> 
    <option value="5">Product 2</option> 
    <option value="6">Product 3</option> 
</select> 

<ul id="items"> 
    <li data-filter="1">Item 1</li> 
    <li data-filter="2">Item 2</li> 
    <li data-filter="1">Item 3</li> 
    <li data-filter="3">Item 4</li> 
</ul> 

Javascript

$('select[name=products]').change(function() { 
    var filter = $(this).val(); 
    filterList(filter); 
}); 

//News filter function 
function filterList(value) { 

    var checkedValue = new Array(); 

     var inputElements = document.getElementsByClassName('check'); 
     for(var i=0; inputElements[i]; ++i){ 
     if(inputElements[i].checked){ 
      checkedValue.push(inputElements[i].value); 
     } 
     } 

     var list = $("#items li"); 
    $(list).fadeOut("fast"); 

    if (value == "all") { 
      $("#items").find("li").each(function() { 
      $(this).delay(200).slideDown("fast"); 
     }); 
    } else { 
     if(checkedValue.indexOf(value) < 0) { 
      checkedValue.push(value); 
     } 

     filter = new Array; 

     checkedValue.forEach(function(entry) { 
     filter.push("li[data-filter=" + entry + "]"); 

       }); 

     miVar1 = filter.join(","); 
     console.log(miVar1); 

      $("#items").find(miVar1).each(function() { 
      $(this).delay(200).slideDown("fast"); 
     }); 
    } 
} 

Wenn Sie wählen zu ändern, ein checbox selecteds und Sollwerte in einem Array gelesen, und dann lesen Wert zu wählen Sie Produkte und fügen Sie Wert zum Array hinzu. Dann , der Code

filter = new Array; 
checkedValue.forEach(function(entry) { 
    filter.push("li[data-filter=" + entry + "]"); 
}); 

miVar1 = filter.join(","); 

ein neues Array mit Elementfilter erstellen und das Verketten Array in string, Beispiel: „Li [data-filter = 1], Li [data-filter = 2], Li [data -filter = 4] "und in der Filterjquery verwenden.

Testen Sie jsfiddle und überprüfen Sie die Browser-Konsole, um den Filter zu sehen.

Answer 2

Ihre Elemente auswählen unterschiedlichen Wert, sollte es wie

<select name="products"> 
    <option value="1">Product 1</option> 
    <option value="2">Product 2</option> 
    <option value="3">Product 3</option> 
</select> 

<ul id="items"> 
    <li data-filter="1">Item 1</li> 
<li data-filter="2">Item 2</li> 
<li data-filter="3">Item 3</li> 
<li data-filter="4">Item 4</li> 
</ul> 

für Benutzer sein, müssen Sie ein Array machen und die geprüften Werte, dass setzen. Dann, bei Dropdown-Änderung, rufen Sie eine andere Funktion am Ende foreach Werte im Array. Eine Idee, die du daraus bekommen kannst.

var selected = ['1','2']; 
     $('selected').each(function (i) { 
      $("#items").find("li[data-filter*=" + value + "]").each(function()  { 
      $(this).delay(200).slidedown("fast"); 
     }); 
    });