javascript - JS在选择“все”选项时需要返回所有值
问题描述
the problem in the code is this: I can't think of how to return all elements when the "все" option is selected I will be very grateful for any help
<div class="filter-box">
<div class="select-box">
<label class="filter-label">Категория</label>
<select id="cats" class="select-control">
<option value="0">Все</option>
<option value="1">Завтраки</option>
<option value="2">Первые блюда</option>
<option value="3">Гарниры</option>
</select>
</div><!-- /.select-box -->
<div class="price-select-box">
<label class="filter-label">Цена</label>
<select id="price" class="select-control">
<option value="0">Все</option>
<option value="30">До 30 грн</option>
<option value="50">До 50 грн</option>
<option value="100">До 100 грн</option>
<option value="150">До 150 грн</option>
</select>
</div><!-- /.price-select-box -->
</div>
<div id="products" class="products-box grid-box "> </div>
const products = document.getElementById("products");
const catsSel = document.getElementById("cats");
const priceSel = document.getElementById("price");
document.addEventListener('change', handleChange)
function handleChange(e) {
const {target} = e;
if(target.id !== "cats" && target.id !== "price") {
return;
}
const selectedCat = parseInt(catsSel.value)
const selectedPrice = parseInt(priceSel.value)
const data = defaultData.products.filter((item) => {
return (
(selectedCat === -1 || item.cid === selectedCat) &&
(selectedPrice === -1 || item.price <= selectedPrice)
)
})
render(data)
}
var defaultData = {
cats: [
{ id: 1, title: "Все" },
{ id: 2, title: "Завтраки" },
{ id: 3, title: "Первые блюда" },
{ id: 4, title: "Гарниры" }
],
products: [
{
id: 1,
cid: 1,
title: "Овсяная каша с фруктами",
im: "<img class='img-fluid' src='i/im1.jpg'>",
price: 30
},
{
id: 2,
cid: 1,
title: "Яичница глазунья с овощами на сковородке",
im: "<img class='img-fluid' src='i/im2.jpg'>",
price: 25
},
{
id: 3,
cid: 1,
title: "Сет азербайджанский завтрак",
im: "<img class='img-fluid' src='i/im3.jpg'>",
price: 10
},
{
id: 4,
cid: 4,
title: "Яичница с помидорами по-бакински",
im: "<img class='img-fluid' src='i/im4.jpg'>",
price: 28
},
{ id: 5, cid: 1, title: "Сырники со сметаной", im: "<img class='img-fluid' src='i/im5.jpg'>", price: 50},
{ id: 6, cid: 2, title: "Шпинатный крем-суп", im: "<img class='img-fluid' src='i/im6.jpg'>", price: 60},
{ id: 7, cid: 2, title: "Суп Пити", im: "<img class='img-fluid' src='i/im7.jpg'>", price: 118},
{ id: 8, cid: 2, title: "Борщ украинский", im: "<img class='img-fluid' src='i/im8.jpg'>", price: 68},
{ id: 9, cid: 2, title: "Суп Кюфта Бозбаш", im: "<img class='img-fluid' src='i/im9.jpg'>", price: 145},
{
id: 10,
cid: 2,
title: "Суп Соютма из ягненка",
im: "<img class='img-fluid' src='i/im10.jpg'>",
price: 150
},
{ id: 11, cid: 3, title: "Картофель фри", im: "<img class='img-fluid' src='i/im11.jpg'>", price: 35 },
{
id: 12,
cid: 3,
title: "Картофель по-домашнему",
im: "<img class='img-fluid' src='i/im12.jpg'>",
price: 45
}
],
};
var renderCats = defaultData.cats.reduce((acc, item) => {
acc[item.id] = item;
return acc;
}, {});
这是所有代码https://codesandbox.io/s/affectionate-albattani-s0snm?file=/src/index.js
只有一个错误,由于某种原因,该变量在数据文档中不可见
解决方案
应为 0(“все”选项的值)
(selectedCat === 0
(selectedPrice === 0
const products = document.getElementById("products");
const catsSel = document.getElementById("cats");
const priceSel = document.getElementById("price");
document.addEventListener('change', handleChange)
function handleChange(e) {
const {target} = e;
if(target.id !== "cats" && target.id !== "price") {
return;
}
const selectedCat = parseInt(catsSel.value)
const selectedPrice = parseInt(priceSel.value)
const data = defaultData.products.filter((item) => {
return (
(selectedCat === 0 || item.cid === selectedCat) &&
(selectedPrice === 0 || item.price <= selectedPrice)
)
})
if (data.length !== 0) { render(data) }
}
function render(data) {
let output = '';
for (const item of data) {
output += item.im;
}
document.getElementById("render-box").innerHTML = output;
}
var defaultData = {
cats: [
{ id: 1, title: "Все" },
{ id: 2, title: "Завтраки" },
{ id: 3, title: "Первые блюда" },
{ id: 4, title: "Гарниры" }
],
products: [
{
id: 1,
cid: 1,
title: "Овсяная каша с фруктами",
im: "<img class='img-fluid' src='i/im1.jpg'>",
price: 30
},
{
id: 2,
cid: 1,
title: "Яичница глазунья с овощами на сковородке",
im: "<img class='img-fluid' src='i/im2.jpg'>",
price: 25
},
{
id: 3,
cid: 1,
title: "Сет азербайджанский завтрак",
im: "<img class='img-fluid' src='i/im3.jpg'>",
price: 10
},
{
id: 4,
cid: 4,
title: "Яичница с помидорами по-бакински",
im: "<img class='img-fluid' src='i/im4.jpg'>",
price: 28
},
{ id: 5, cid: 1, title: "Сырники со сметаной", im: "<img class='img-fluid' src='i/im5.jpg'>", price: 50},
{ id: 6, cid: 2, title: "Шпинатный крем-суп", im: "<img class='img-fluid' src='i/im6.jpg'>", price: 60},
{ id: 7, cid: 2, title: "Суп Пити", im: "<img class='img-fluid' src='i/im7.jpg'>", price: 118},
{ id: 8, cid: 2, title: "Борщ украинский", im: "<img class='img-fluid' src='i/im8.jpg'>", price: 68},
{ id: 9, cid: 2, title: "Суп Кюфта Бозбаш", im: "<img class='img-fluid' src='i/im9.jpg'>", price: 145},
{
id: 10,
cid: 2,
title: "Суп Соютма из ягненка",
im: "<img class='img-fluid' src='i/im10.jpg'>",
price: 150
},
{ id: 11, cid: 3, title: "Картофель фри", im: "<img class='img-fluid' src='i/im11.jpg'>", price: 35 },
{
id: 12,
cid: 3,
title: "Картофель по-домашнему",
im: "<img class='img-fluid' src='i/im12.jpg'>",
price: 45
}
],
};
var renderCats = defaultData.cats.reduce((acc, item) => {
acc[item.id] = item;
return acc;
}, {});
<div class="filter-box">
<div class="select-box">
<label class="filter-label">Категория</label>
<select id="cats" class="select-control">
<option value="0">Все</option>
<option value="1">Завтраки</option>
<option value="2">Первые блюда</option>
<option value="3">Гарниры</option>
</select>
</div><!-- /.select-box -->
<div class="price-select-box">
<label class="filter-label">Цена</label>
<select id="price" class="select-control">
<option value="0">Все</option>
<option value="30">До 30 грн</option>
<option value="50">До 50 грн</option>
<option value="100">До 100 грн</option>
<option value="150">До 150 грн</option>
</select>
</div><!-- /.price-select-box -->
</div><!-- /filter-box-->
<div id="render-box"></div>
推荐阅读
- javascript - 如何将对象作为数据类型传递给选择元素并使其可读以在其他地方使用?
- javascript - 传播为对象数组创建新对象
- h5py - 当我尝试使用“a”打开文件时,H5Py 抛出 OSErrors
- python - 使用 tensorflow 2.0 通过索引列表索引和张量
- python - 在 Python 中编写 Discord 机器人 - 在 on_raw_reaction_add 中,我如何判断消息是否有图像?
- compression - HBase 2.3.5 无法启动 regionserver,错误日志:java.io.IOException: Compression codec snappy not supported, aborting RS construction
- go - G110:减压炸弹的潜在 DoS 漏洞 (gosec)
- 1password - 在 gopass 中保存环境变量
- python - python - 如何获取分层类名
- python - Django None 参数函数问题