Javascript Filterung von Inhalten auf Checkbox Wert

Question

Ich habe Code wie dieses

<div id="filter"> 
</div> 
<div id="items"> 
    <div class="item"> 
     <h2>Orange</h2> 
     <img src="orange.png" alt="" /> 
    </div> 
    <div class="item"> 
     <h2>Banana</h2> 
     <img src="banana.png" alt="" /> 
    </div> 
</div> 

Ich mag würde divs mit Klasse „Element“ filtern, auf seiner Childs src Werte img. Zum Beispiel, wenn ich den Eingang mit dem Wert banana.png überprüfte, sollte nur .item mit demselben img src Wert angezeigt werden. Ruhe muss verborgen sein.

Und wenn Sie das Kontrollkästchen deaktivieren, sollte die Kontrolle wieder erfolgen - Elemente, die ausgeblendet wurden, indem Sie überprüfen, dass die Checkbox wieder angezeigt werden sollte.

Ich habe den gleichen Code, der richtige Checkboxen erstellt, aber wie man Ruhe macht?

$("#items > div").find("img").each(function() { 
    var value = $(this).attr("src"); 
    $("#filter").append('<label><input type="checkbox" [value="' + value + '"]>' + value + '</label>'); 
    var toFilter = $("#items > div").find("img"); 
}); 

Sie können meine codepen auch http://codepen.io/anon/pen/gMpGaE?editors=0010

Answer 1

sehen Sie die div ist wie diese filtern das change Ereignis von Kontrollkästchen verwenden.

$("#items > div").find("img").each(function() { 
 
    var value = $(this).attr("src"); 
 
    $("#filter").append('<label><input type="checkbox" value="' + value + '">' + value + '</label>'); 
 
    var toFilter = $("#items > div").find("img"); 
 
}); 
 
$('#filter').on('change', ':checkbox', function() { 
 
    var checkedArray = $('#filter :checkbox:checked').map(function() { 
 
    return this.value; 
 
    }).get(); 
 
    if (checkedArray.length) { 
 
    $("#items .item").hide(); 
 
    match = $("#items > div").find("img") 
 
     .filter(function() { 
 
     return checkedArray.indexOf($(this).attr('src')) != -1; 
 
     }).closest('.item').show(); 
 
    } else { 
 
    $("#items .item").show(); 
 
    } 
 
})

#items > div { 
 
    border: 1px dotted #355B78; 
 
    margin-bottom: 10px; 
 
} 
 
label { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="filter"> 
 

 
</div> 
 
<div id="items"> 
 
    <div class="item"> 
 
    <h2>Orange</h2> 
 
    <img src="orange.png" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
    <h2>Banana</h2> 
 
    <img src="banana.png" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
    <h2>Orange</h2> 
 
    <img src="orange.png" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
    <h2>Banana</h2> 
 
    <img src="banana.png" alt="" /> 
 
    </div> 
 
</div>