我使用window.location.href作为元素过滤器。但是,当我单击筛选按钮时,并非所有元素都显示出来。我操作的那些不显示,但我直接从DB返回的是。
首先,按钮是这样的,每个月一个:
<div class="monthsButton">
<button type="button" data-month="0" >2021</button>
<button type="button" data-month="1" >Janeiro</button>
<button type="button" data-month="2" >Fevereiro</button>
其次,要使用日期作为过滤器,我使用以下命令:
const month = req.query.month;
if(month > 0) {
launch = lancamentos.filter(item => {
const data = new Date(item.data);
return (data.getMonth() + 1) == month
})
}
最后,要执行操作,按钮配置如下:
const monthsButton = document.querySelectorAll('.monthsButton button')
for (let button of monthsButton) {
const month = button.dataset.month
button.onclick = () => {
window.location.href= `?month=${month}`
}
}
问题是过滤器按钮识别日期,使用它,但它不显示过滤时,日期和数字值。
Run on you local, because use window.location ...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="monthsButton">
<button type="button" data-month="7" >Jul</button>
<button type="button" data-month="8" >Aug</button>
</div>
<br>
<script>
const monthsButton = document.querySelectorAll('.monthsButton button')
for (let button of monthsButton) {
const month = button.dataset.month
button.onclick = () => {
window.location.href= `?month=${month}`
}
}
const lancamentos = [
{
name: 'Foo',
date: 'Wed Aug 04 2021 18:18:14 GMT+0300 (GMT+03:00)' // Month 07
},
{
name: 'Bar',
date: 'Wed Jul 04 2021 18:18:14 GMT+0300 (GMT+03:00)' // Month 06
},
{
name: 'Bar',
date: 'Wed Aug 03 2021 18:18:14 GMT+0300 (GMT+03:00)' // Month 07
}
]
let launch = lancamentos
const month = +window.location.search[7];
console.log('Current month = ' , month)
if(month > 0) {
launch = lancamentos.filter(item => {
const date = new Date(item.date)
console.log('Item month + 1 = ', date.getMonth() + 1)
return (date.getMonth() + 1) === month // 6 + 1 !== 8, 7 + 1 === 8
})
}
window.document.write(JSON.stringify(launch))
</script>
</body>
</html>