-1
Ich versuche, ein gemeinsames Filtermodul zu erstellen, das Objekte basierend auf einigen Kontrollkästchen anzeigt. Bis jetzt war ich in der Lage, den Farbabschnitt mit Hilfe anderer stackoverflow Mitglieder zu bauen. Es zeigt gewünschte Objekte an, wenn Kontrollkästchen aktiviert oder deaktiviert sind. Jetzt möchte ich gewünschte Objekte anhand ihrer Größe zeigen können, aber ich konnte keine Bedingung dafür finden. Lese Kommentare im Code.Suchen nach einer Bedingung zum Filtern eines Arrays von Objekten
var DATABASE = [
{id:0, color:'green', size:'L', collarType:'regular', cap:false, sleeves:'short', price: 35, availability: true},
{id:1, color:'red', size:'XL', collarType:'scoop', cap:false, sleeves:'long', price: 40, availability: false},
{id:2, color:'blue', size:'M', collarType:'turtle', cap:false, sleeves:'3/4', price: 45, availability: true},
{id:3, color:'red', size:'XXL', collarType:'scoop', cap:true, sleeves:'3/4', price: 25, availability: false},
{id:4, color:'red', size:'L', collarType:'regular', cap:true, sleeves:'short', price: 40, availability: true},
{id:5, color:'green', size:'S', collarType:'regular', cap:false, sleeves:'short', price: 70, availability: false},
{id:6, color:'yellow', size:'L', collarType:'v-neck', cap:true, sleeves:'short', price: 25, availability: true}
];
var selection = DATABASE;
document.addEventListener('DOMContentLoaded', function() {
const mainContent = document.querySelector('main');
// COLOR CHECKBOXES
const chbBlueColor = document.querySelector('#blue-color-filter');
const chbRedColor = document.querySelector('#red-color-filter');
const chbGreenColor = document.querySelector('#green-color-filter');
const chbYellowColor = document.querySelector('#yellow-color-filter');
// SIZE CHECKBOXES
const chbXxlSize = document.querySelector('#size-xxl');
function applyFilter() {
function filterFn(obj) {
return (chbBlueColor.checked || obj.color !== "blue") &&
(chbRedColor.checked || obj.color !== "red") &&
(chbGreenColor.checked || obj.color !== "green") &&
(chbYellowColor.checked || obj.color !== "yellow")
// if 2XL checkbox is checked and no other checkboxes are checked, show all available objects that has a size property = XXL
// if some other checkboxes are already checked, show objects that has a size property = XXL based on those checked items
}
selection = DATABASE.filter(filterFn);
mainContent.innerHTML = JSON.stringify(selection);
}
// COLOR EVENT LISTENERS
chbBlueColor.addEventListener('change', applyFilter);
chbRedColor.addEventListener('change', applyFilter);
chbGreenColor.addEventListener('change', applyFilter);
chbYellowColor.addEventListener('change', applyFilter);
// SIZE EVENT LISTENERS
chbXxlSize.addEventListener('change', applyFilter);
});section > div {
margin: 5px;
padding: 10px;
display: inline-block;
background-color: #e4e4e4;
}
H4 {
border-bottom: 1px solid;
}
label {
font-size: 14px;
}<body>
<section>
<div class="color-filter">
<H4>COLOR</H4>
<input type="checkbox" id="all-colors">
<label for="all-colors">All</label>
<input type="checkbox" id="blue-color-filter">
<label for="blue-color-filter">Blue</label>
<input type="checkbox" id="red-color-filter">
<label for="red-color-filter">Red</label>
<input type="checkbox" id="green-color-filter">
<label for="green-color-filter">Green</label>
<input type="checkbox" id="yellow-color-filter">
<label for="yellow-color-filter">Yellow</label>
</div>
<div class="size-filter">
<H4>SIZE</H4>
<input type="checkbox" id="all-sizes">
<label for="all-sizes">All</label>
<input type="checkbox" id="size-xxl">
<label for="size-xxl">2XL</label>
<input type="checkbox" id="size-xl">
<label for="size-xl">XL</label>
<input type="checkbox" id="size-l">
<label for="size-l">L</label>
<input type="checkbox" id="size-m">
<label for="size-m">M</label>
<input type="checkbox" id="size-s">
<label for="size-s">S</label>
</div>
<div class="collar-and-cap-filter">
<div class="collar-filter">
<h4>COLLAR</h4>
<input type="checkbox" id="all-collars">
<label for="all-collars">All</label>
<input type="checkbox" id="collar-regular">
<label for="collar-regular">Regular</label>
<input type="checkbox" id="collar-scoop">
<label for="collar-scoop">Scoop</label>
<input type="checkbox" id="collar-turtle">
<label for="collar-turtle">Turtle</label>
<input type="checkbox" id="collar-vneck">
<label for="collar-vneck">V-neck</label>
</div>
<div class="cap-filter">
<input type="checkbox" id="all-caps">
<label for="all-caps">All</label>
<input type="checkbox" id="cap available">
<label for="cap available">Cap</label>
<input type="checkbox" id="cap-unavailable">
<label for="cap-unavailable">No cap</label>
</div>
</div>
<div class="availability-filter">
<input type="checkbox" id="availability">
<label for="availability">Only Available Products</label>
</div>
</section>
</body>
Versuchen Sie, Ihr Problem auf das Nötigste zu beschränken. Wenn Sie es in seiner Isolation verstehen, dann gehen Sie zurück und versuchen Sie, es in seinen Kontext zu integrieren. – Jieter
Wie @Jieter schrieb, stelle nur das zur Verfügung, was benötigt wird, um das spezifische Problem vollständig darzustellen. Geben Sie auch keine Beschreibung Ihres Problems in Code-Kommentaren an. Zuletzt, was meinst du, wenn du sagst: "Ich konnte keine Bedingung finden" *? Hast du versucht, einen zu schreiben? Was war das Ergebnis? –
Wenn Sie also von Ihrem Beitrag lesen, "schreiben" Sie Ihre App, indem Sie eine Abfolge von Fragen stellen, so dass Sie nichts lernen müssen und die Community Ihre Zeit in die Gestaltung Ihrer Anwendung investieren kann? Noch besser, dass Sie uns dazu bringen, die Kommentare im Code zu lesen ... Können Sie zeigen, welche Anstrengungen Sie unternommen haben, um es selbst zu lösen? – Icepickle