我想要一个过滤器，这样你就可以看到不同属性的食谱。这适用于复选框/单选按钮，但不适用于滑块。滑块无论如何都不起作用，只有当我打开滑块上方的一个过滤器时，才能确保所有食谱都再次可见。
滑块基于配方中的人数。
我想如果我使用滑块，然后过滤上面的一个选项，然后再次过滤。或者，当我使用上面的某个选项时，先过滤，然后当我使用滑块时，再过滤。
euroFilter();
valueUpdater();
function euroFilter() {
$("#slider").on("change", function() {
var personCurrent = parseInt(
$("#personCurrent")
.text()
.substring(2, 4)
);
var allProducts = $("#receptenContainer a");
for (var i = 0; i < allProducts.length; i++) {
var receptPerson = parseInt($(allProducts[i])[0].dataset.persoon);
if (receptPerson > personCurrent) {
$(allProducts[i]).hide();
} else {
$(allProducts[i]).show();
}
}
});
}
function valueUpdater() {
var slider = d.getElementById("slider");
var output = d.getElementById("personCurrent");
slider.oninput = function() {
output.innerHTML = "( " + this.value + " )";
};
}
});
https://codepen.io/fe-chucky/pen/WNvKZMm
以下函数中有一个错误。
function valueUpdater() {
var slider = d.getElementById("slider");
var output = d.getElementById("personCurrent");
slider.oninput = function() {
output.innerHTML = "( " + this.value + " )";
};
由于未定义"d"，因此会出现错误。而不是d类型的文档，它是有效的。
function valueUpdater() {
var slider = document.getElementById("slider");
var output = document.getElementById("personCurrent");
slider.oninput = function() {
output.innerHTML = "( " + this.value + " )";
};
}
-------------已编辑-------------我使用一个函数来过滤食谱。该函数在复选框单击以及滑块更改事件时调用。我提取了您的部分代码以及一些变量名。我还更改了复选框的名称。将它们从r-sort、b-sort更改为r-sort[]、b-sort[]，以便将它们识别为数组。
$(document).ready(function() {
if (typeof receptObject == "undefined") return false;
var receptAantal = receptObject.recepten.length;
if (receptAantal <= 0) return false;
var location = window.location.origin;
var titleLengte = 42;
var descriptionLengte = 90;
$("#hideMe").remove();
$asideMenu =
"<aside>" +
'<form><fieldset><div class="recept-met"><label id="filterReceptMet"></label></div>' +
'<div class="kooktecnhiek"><label id="filterkooktechniek"></label></div>' +
"<div>" +
'<label id="filterAantalPersonen"></label>' +
'<span id="personCurrent"></span>' +
'<input id="slider" type="range" min="1" max="6" name="p-sort" value="1" step="1" >' +
"</div>" +
"</div>" +
"</fieldset></form></aside>";
$("#selRecepten").append('<div id="selReceptenContainer"></div>');
$("#recepten").append($asideMenu);
$("#recepten").append('<div id="receptenContainer"></div>');
var kooktechnieken = [];
var menugangen = [];
var personen = [];
var receptenMet = [];
for (recept of receptObject.recepten) {
let url,
kooktechniekToFind,
menugangToFind,
personenToFind,
receptMetToFind,
titleShort,
descriptionShort,
card1,
card2;
url = recept.title.toLowerCase();
url = url.replace(/ - /g, "_");
url = url.replace(/ /g, "_");
url = escape(url); // mijn%20document
kooktechniekToFind = recept.kooktechniek;
if (kooktechnieken.indexOf(kooktechniekToFind) == -1) {
kooktechnieken.push(kooktechniekToFind);
}
// menugangToFind = recept.menugang;
// if (menugangen.indexOf(menugangToFind) == -1){
// menugangen.push(menugangToFind);
// }
personenToFind = recept.persoon;
if (personen.indexOf(personenToFind) == -1) {
personen.push(personenToFind);
}
receptMetToFind = recept.receptMet;
if (receptenMet.indexOf(receptMetToFind) == -1) {
receptenMet.push(receptMetToFind);
}
titleShort = recept.title;
if (titleShort.length > titleLengte) {
titleShort = titleShort.substring(0, titleLengte) + "...";
}
descriptionShort = recept.description;
if (descriptionShort.length > descriptionLengte) {
let mijnIndex = descriptionShort.lastIndexOf(" ", descriptionLengte);
descriptionShort = descriptionShort.substring(0, mijnIndex) + " ...";
}
card2 =
'<a href="" class="recept"' +
'id="' +
recept.id +
'" ' +
'data-kooktechniek="' +
recept.kooktechniek +
'" ' +
'data-persoon="' +
recept.persoon +
'" ' +
'data-recept-met="' +
recept.receptMet +
'" ' +
'title="' +
recept.title +
'" ' +
'data-kooktechniek-flag="0" data-persoon-flag="0" data-recept-met-flag="0" >' +
'<div class="card">' +
"<h2>" +
'<ul class="info-recept"><li class="' +
recept.kooktechniek +
'">' +
recept.kooktechniek +
'</li><li class="' +
recept.receptMet +
'">' +
recept.receptMet +
'</li><li class="bereid">' +
recept.persoon +
"<span>" +
recept.persoon +
" persons" +
"</span>" +
"</li></ul>" +
titleShort +
"</h2>" +
'<ul class="ingredienten"><li>' +
recept.ingredienten[0] +
"</li><li>" +
recept.ingredienten[1] +
"</li><li>" +
recept.ingredienten[2] +
"</li><li>" +
recept.ingredienten[3] +
"</li><li>" +
recept.ingredienten[4] +
"</li></ul>" +
'<p class="button">' +
titleShort +
" maken" +
"</p>" +
"</div></a>";
$("#receptenContainer").append(card2);
}
var checkboxKook = "";
for (kooktechniek of kooktechnieken) {
checkboxKook +=
'<div class="cbox"><input type="checkbox" name="b-sort[]" value="' +
kooktechniek +
'" >' +
'<label class="' +
kooktechniek +
'">' +
kooktechniek +
"</label></div>";
}
$("#filterkooktechniek").after(checkboxKook);
var checkboxRecept = "";
for (receptMet of receptenMet) {
checkboxRecept +=
'<div class="cbox"><input type="checkbox" name="r-sort[]" value="' +
receptMet +
'" >' +
receptMet +
"</div>";
}
$("#filterReceptMet").after(checkboxRecept);
$("aside input:checkbox").on("click", function(e) {
filterRecipie();
}); // einde events
euroFilter();
valueUpdater();
function euroFilter() {
$("#slider").on("change", function() {
//$('#slider').bind('change',function(){
var personCurrent = parseInt(
$("#personCurrent")
.text()
.substring(2, 4)
);
filterRecipie();
});
}
function valueUpdater() {
var slider = document.getElementById("slider");
var output = document.getElementById("personCurrent");
slider.oninput = function() {
output.innerHTML = "( " + this.value + " )";
};
}
}); // einde document ready
function filterRecipie() {
console.log("HERE");
var mainIn = new Array();
var cookTech = new Array();
var aantalkooktechniek = 0;
var aantalReceptMet =0;
$("input[name='r-sort[]']").each(function () {
if ($(this).prop('checked')==true){
//console.log($(this).val());
mainIn.push($(this).val());
aantalReceptMet = 1;
}
});
$("input[name='b-sort[]']").each(function () {
if ($(this).prop('checked')==true){
//console.log($(this).val());
cookTech.push($(this).val());
aantalkooktechniek = 1;
}
});
var personCurrent = parseInt($("#personCurrent").text().substring(2, 4) );
if(! personCurrent) { personCurrent = 0; aantalPersonen = 0; } else {aantalPersonen = 1; }
var alleCards = $("#receptenContainer a");
alleCards.each(function() {
var card = $(this);
var receptPerson = card.attr("data-persoon");
if (cookTech.indexOf(card.attr("data-kooktechniek") ) >= 0 || aantalkooktechniek ==0) {
card.attr("data-kooktechniek-flag", "1");
}
else {
card.attr("data-kooktechniek-flag", "0");
}
if (mainIn.indexOf(card.attr("data-recept-met") ) >= 0 || aantalReceptMet == 0) {
card.attr("data-recept-met-flag", "1");
}
else {
card.attr("data-recept-met-flag", "0");
}
if (receptPerson >= personCurrent) {
card.attr("data-persoon-flag", "1");
}
else {
card.attr("data-persoon-flag", "0");
}
if( card.attr("data-persoon-flag")=="1" && card.attr("data-recept-met-flag") == "1" && card.attr("data-kooktechniek-flag") == "1" ) {
// show this
console.log("This matches on ALL count!!");
card.show();
}
else {
// hide this
card.hide();
console.log("This does not meet requirements!!");
}
}); // einde each (card) product
}
var receptObject =
'{"recepten":[' +
'{ "id" : "1", "title" : "Bamisoep", "receptVan" : "Nigella Lawson", "kooktechniek" : "bakken", "receptMet" : "vis", "persoon" : "4", "tijdMin" : "5", "menugang" : "voorgerecht", "image" : "bamisoep.jpg", "bgimage" : "recept-bami-soep.jpg", "ingredienten" : ["1 mienestje","1 bosje Lente ui","1 bosje Koriander","1 Chilipeper","Miso bouillon","Zalmfilet"], "description" : "Bereid de mie volgens de aanwijzingen op de verpakking, giet af, spoel af onder de koude kraan en zet opzij tot gebruik. Fruit de ui en knoflook in de olie tot de ui glazig is en schep het vlees erdoor. Bak kort mee en voeg 2 theelepels gemalen witte peper toe. Giet de bouillon erbij, breng aan de kook en laat op laag vuur 5 minuten doorkoken. Roer de prei en bladselderij erdoor. Verdeel de mie over soepkommen en schenk de bouillon met vlees en groenten erover. Garneer met gebakken uitjes."},' +
'{ "id" : "34", "title" : "Thaise kip", "receptVan" : "Nigella Lawson", "kooktechniek" : "oven", "receptMet" : "vlees", "persoon" : "4", "tijdMin" : "30", "menugang" : "hoofdgerecht", "image" : "thaisekip.jpg", "bgimage" : "recept-thaise-kip.jpg", "ingredienten" : ["600 gr. kipfilet","Paprika groen/geel/rood","1 bosje Koriander","1 zakje cashewnoten","250 gr. shi-take"], "description" : "Verwarm de oven voor op 190 °C. Maal de rode pepers, santen, het limoenraspsel en -sap en de koriander in de keukenmachine tot een gladde pasta. Maak het vel aan de bovenkant van de kip wat losser en druk de wijs- en middelvinger eronder zodat er een zakje ontstaat. Maak twee inkepingen in de bouten. Druk het grootste deel van de pasta in het zakje onder het vel en wrijf de resterende pasta over de bouten. Leg de schijfjes limoen onder in een braadslee en leg de kip erop. Leg een vel aluminiumfolie erover en braad de kip 40 minuten in de oven. Neem hem uit de oven, verwijder de aluminiumfolie en bedruip de kip. Zet de kip weer in de oven en braad hem onafgedekt nog eens 30-40 minuten; bedruip de kip in die tijd af en toe. Neem de kip uit de oven en laat hem 5 minuten afkoelen. Verdeel de kip over vier warme borden."},' +
'{ "id" : "35", "title" : "Tagliatelle", "receptVan" : "Jamie Oliver", "kooktechniek" : "koken", "receptMet" : "vegetarisch", "persoon" : "6", "tijdMin" : "40", "menugang" : "hoofdgerecht", "image" : "tagliatelle.jpg", "bgimage" : "recept-tagliatelle.jpg", "ingredienten" : ["200 gr. aardappelen","400 gr. tagliatelle","Handje haricots verts","Parmezaanse kaas","Pijnboompitten","Teentje knoflook"], "description" : "Stamp de helft van de pijnboompitten fijn en doe ze met de andere, niet-fijngestampte pijnboompitten, het citroensap en de geraspte citroenschil, de fijngehakte peterselie en de olijfolie in een grote vuurvaste schaal. Roer alles door elkaar en doe de Parmezaanse kaas en pecorino erbij. Als het goed is heb je nu een vrij dikke saus, die je eigenlijk meer als een soort dressing moet zien. Proef hem daarom en bedenk of de verschillende smaken tot hun recht komen. Ik wil dat je de saus zodanig in evenwicht brengt dat je een vrij zurige smaak krijgt, omdat de smaak van de citroen wanneer de saus opwarmt en de kaas smelt, aanzienlijk milder wordt. Breng de saus op smaak met wat zwarte peper uit de molen. Proef nogmaals en als de balans nog niet helemaal in orde is, dan doe je er gewoon nog wat olie en Parmezaanse kaas bij. Breng een grote pan water met wat zout aan de kook voor de pasta. Zet de schaal met saus op de pan terwijl het water opwarmt - dat haalt de kou uit de saus en warmt hem alvast een klein beetje op. Haal de schaal zodra het water begint te koken van de pan en doe de pasta in het water. Kook de pasta volgens de aanwijzingen op de verpakking, laat de pasta in een vergiet uitlekken en bewaar een klein beetje van het kookvocht. Hussel de pasta door de saus en voeg een beetje van het kookvocht toe om de pasta smeuïg te maken. De hitte van de pasta zorgt ervoor dat de kaas smelt en de heerlijke saus een mooi laagje om de pastavormpjes vormt. Als je de saus te dik vindt moet je er wat extra kookvocht bij doen. Het is niet de bedoeling dat de saus plakkerig en dik is, maar juist ongelofelijk zacht, fris en geurig. Proef nog een laatste keer of de smaken perfect in evenwicht zijn en serveer de tagliatelle direct, met wat vers geschaafde Parmezaanse kaas en wat peterselie erover gestrooid."},' +
'{ "id" : "36", "title" : "Mug cake", "receptVan" : "Yotam Ottolenghi", "kooktechniek" : "oven", "receptMet" : "vegetarisch", "persoon" : "1", "tijdMin" : "10", "menugang" : "nagerecht", "image" : "mugcake.jpg", "bgimage" : "recept-mugcake.jpg", "ingredienten" : ["1 eetlepel havermout","4 eetlepels bloem", "2 eetlepels rietsuiker", "1 snufje kaneelpoeder", "1 theelepel vanillesuiker", "15 g licht gezouten boter"], "description" : "Meng de ijskoude, licht gezouten boter, de havermout, de bloem, de rietsuiker en de amandelen door elkaar. Schil de halve appel, verwijder het klokhuis en snijd hem in blokjes. In een beker: vermeng de appelstukjes, het citroensap, de vanillesuiker of de ahornsiroop, 1 eetlepel water en het kaneelpoeder. Zet de beker 3 minuten in de magnetron (800 watt). Schep de crumble op het appelmengsel. Zet de mug cake nu 2 minuten en 30 seconden in de magnetron (800 watt)."},' +
'{ "id" : "125", "title" : "Pulled zalm", "receptVan" : "Jamie Oliver", "kooktechniek" : "bakken", "receptMet" : "vis", "persoon" : "6", "tijdMin" : "45", "menugang" : "hoofdgerecht", "image" : "pulledzalm.jpg", "bgimage" : "recept-pulled-zalm.jpg", "ingredienten" : ["300g zeezout","80g rietsuiker", "2 citroenen", "1kg zalmfilet, wild, met vel", "1 citroen", "dille"], "description" : "Meng zeezout, rietsuiker en citroenrasp en smeer hier de zalm goed mee in. Laat afgedekt een uur in de koelkast pekelen. Spoel schoon onder de kraan en dep goed droog. Strooi de rookmot op de kolen, leg direct de zalm op de huid in de barbecue (temperatuur van 80 °C | vuur, indirect) en laat 30 minuten roken. Zorg ervoor dat de temperatuur niet boven 60 °C komt. Laat de zalm even uitdampen en trek voorzichtig met de vingers de segmenten uit elkaar. Wat mij betreft geen saus, alleen een beetje citroensap en zwarte peper. Garneer met een paar pluimpjes dille."},' +
'{ "id" : "3584", "title" : "Biryani", "receptVan" : "Jamie Oliver", "kooktechniek" : "bakken", "receptMet" : "vis", "persoon" : "5", "tijdMin" : "50", "menugang" : "hoofdgerecht", "image" : "biryani.jpg", "bgimage" : "recept-biryani.jpg", "ingredienten" : ["500g witvisfilets","Kurkuma", "limoensap", "Basmatirijst", "Rozijnen", "Cashewnoten"], "description" : "Verhit 1 eetlepel ghee in een grote pan met dikke bodem op matig vuur, bak de rijst ongeveer 10 minuten, voeg naar smaak zout toe en doe er 1 theelepel kurkuma en 1 liter heet water bij. Roer zachtjes en breng aan de kook. Draai het vuur laag, en laat de rijst ongeveer 15 minuten met deksel koken tot alle water geabsorbeerd is. Verhit 4 eetlepels ghee in een koekenpan op matig laag vuur, doe er de rozijnen bij, roerbak ze ongeveer 1 minuut en schep ze met een schuimspaan uit de pan. Doe de cashewnoten in de pan, roerbak ze ongeveer 1 minuut, of tot ze bruin zijn, en schep ze met een schuimspaan uit de pan. Doe de uien in de pan en bak ze in ongeveer 5-7 minuten goudbruin. Draai het vuur laag, voeg het chilipoeder, de koriander, de rest van de kurkuma, 4 theelepels water en de hele specerijen toe, en blijf ongeveer 2 minuten roeren. Doe er de stukjes vis bij, voeg naar smaak zout toe, en bak ze ongeveer 5 minuten. Giet 250 ml water in de pan, breng aan de kook en doe er de tomaten bij. Draai het vuur laag, giet er de yoghurt bij en laat het mengsel 5 minuten pruttelen tot de saus mooi dik is. Kwast een pan met dikke bodem in met een beetje ghee, schep er een laagje vis in, dek de stukjes vis af met een laagje rijst, en strooi er wat rozijnen en cashewnoten over. Herhaal dit proces tot de vis en rijst op zijn en strooi er als laatste een laagje rozijnen en cashewnoten op. Leg een deksel op de pan en zet hem ongeveer 5 minuten op een bakplaat op heel laag vuur. Je kunt hem eventueel ook zonder bakplaat op heel laag vuur zetten."},' +
'{ "id" : "3852", "title" : "Bami Goreng", "receptVan" : "Nigella Lawson", "kooktechniek" : "koken", "receptMet" : "vegetarisch", "persoon" : "3", "tijdMin" : "35", "menugang" : "hoofdgerecht", "image" : "bami.jpg", "bgimage" : "recept-bami-goreng.jpg", "ingredienten" : ["500g bami","2 uien","1 prei","winterwortel", "witte kool", "ketjap manis", "sesamolie"], "description" : "Kook de bami volgens de aanwijzingen op de verpakking. Maak in een tjobeh of foodprocessor de rode ui, knoflook, lombok, djahé, djinten en ketumbar fijn tot een gladde boemboe. Verhit 2 eetlepels olie in een wok en fruit de uien lichtbruin aan. Voeg de boemboe toe en bak nog 3 minuten. Voeg dan de gesneden groenten en een groot deel van de gehakte selderij toe, bak even goed door en meng daarna de zoete en zoute ketjap ketjap en de sesamolie erdoor. Schep de gekookte bami in kleine porties door het mengsel in de wok. Bak daarna nog 2 minuten hard door. Garneer de bami goreng met de rest van de gehakte selderij."},' +
'{ "id" : "8002", "title" : "Yakitori", "receptVan" : "Nigella Lawson", "kooktechniek" : "oven", "receptMet" : "vlees", "persoon" : "4", "tijdMin" : "25", "menugang" : "voorgerecht", "image" : "yakatori.jpg", "bgimage" : "recept-yakitori.jpg", "ingredienten" : ["500g lamsvlees","bosje koriander","3 takjes munt","ras-el-hanout","komijnpoeder","1 eiwit"], "description" : "Snijd het lamsvlees in stukjes van 2 à 3 cm. Maak het vlees fijn in de keukenmachine met de verse kruiden, de knoflook, de specerijen, 1 theelepel zout, 1 theelepel zwarte peper en ten slotte het eiwit. Vorm in de holte van je hand balletjes van dit mengsel en rol ze door de bloem. Rijg twee balletjes aan elke bamboe prikker en knijp ze rondom goed aan tegen het stokje, zodat ze tijdens het roosteren niet opengaan. Voeg nog een eiwit toe als het mengsel te droog is. Roer de ingrediënten voor de saus heel goed door elkaar. Rooster de yakitori 5 minuten, draai ze regelmatig om en besprenkel telkens met de saus. Dien ze op met de rest van de saus."},' +
'{ "id" : "10058", "title" : "Cheesecake", "receptVan" : "Yotam Ottolenghi", "kooktechniek" : "koken", "receptMet" : "vegetarisch", "persoon" : "1", "tijdMin" : "10", "menugang" : "nagerecht", "image" : "cheesecake.jpg", "bgimage" : "recept-cheesecake.jpg", "ingredienten" : ["2 digestivekoekjes","25g aardbeien", "15g gezouten boter", "15g poedersuiker", "Mascarpone"], "description" : "Doe de digestives in een diepvrieszakje. Duw de lucht uit het zakje, sluit dit en verkruimel de koekjes door er met een deegroller op te slaan. Doe de kruimels uit het zakje over in een schaaltje, doe de boter erbij en wrijf die er met je vingers door tot je een samenhangend geheel hebt. Schep in een schaaltje of glas en druk het mengsel stevig aan op de bodem. Pureer het grootste deel van de aardbeien en de poedersuiker met een staafmixer of vork. Roer de roomkaas erdoor en schep dit mengsel op de koekjesbodem. Leg de achtergehouden gehalveerde aardbeien erop. Eet meteen of laat in ongeveer 20 minuten in de koelkast iets steviger worden."}' +
"]}";
receptObject = JSON.parse(receptObject);