从DatePicker中隐藏和显示基于日期更改的元素

Question

以下解决方案有效，但我希望在整个月内继续添加元素。

当我删除＝"0"的日期时；none"；之前的日期开始叠加在一起。

有没有一种方法可以简化javascript，这样我就不必不断地将每个日期添加到if-else语句中来隐藏和显示它们了？

function selectDate() {
var x = document.getElementById("start").value;
if (x == "2022-03-21") {
document.getElementById("2022-03-21").style.display = "flex";
document.getElementById("2022-03-22").style.display = "none";
document.getElementById("2022-03-23").style.display = "none";
}
else if (x == "2022-03-22") {
document.getElementById("2022-03-22").style.display = "flex";
document.getElementById("2022-03-21").style.display = "none";
document.getElementById("2022-03-23").style.display = "none";
}
else if (x == "2022-03-23") {
document.getElementById("2022-03-23").style.display = "flex";
document.getElementById("2022-03-21").style.display = "none";
document.getElementById("2022-03-22").style.display = "none";
}
}

<section>
<div class="container ">
<div class="row">
<div class="col">
<input type="date" id="start" onchange="selectDate()">
</div>
</div>
<div class="row" id="2022-03-21" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>1</h4>
</div>
<div class="col">
<h4>2</h4>
</div>
</div>
</div>
</div>
<div class="row" id="2022-03-22" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>3</h4>
</div>
<div class="col">
<h4>4</h4>
</div>
</div>
</div>
</div>
<div class="row" id="2022-03-23" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>5</h4>
</div>
<div class="col">
<h4>6</h4>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

我不知道你所说的是什么意思

当我删除="的日期时；none"；之前的日期开始叠加在一起。

我在您的代码段中没有看到这种情况。

也就是说，您可以简化隐藏/显示div的代码，而不必在日期中硬编码。

1. 为要显示/隐藏的每个元素指定一个公共类名，例如output
2. 使用document.querySelectorAll('.output')在NodeList集合中全部选择它们
3. 然后，使用该集合上的.forEach()，可以循环浏览每个集合并将显示更改为无
4. 然后找到与所选日期匹配的元素
5. 如果它不为null，则可以将显示更改为"flex">

就我个人而言，在选择元素时，我更喜欢使用document.querySelector()或document.querySelectorAll()方法。然而，您会注意到，在上面的第4步中，我没有。由于ID以数字开头，因此最好使用document.getElementById()而不是document.querySelector()。您仍然可以这样做，但它需要一些字符串操作。请参阅本文：使用带有数字 ID的querySelector

document.querySelector(`#start`).addEventListener(`change`, function(e) {
// Get every element with the 'output' class &
// loop through each one & change the display to 'none'
document.querySelectorAll(`.output`).forEach(el => el.style.display = `none`);
// get the element that matches the value of the date selected
const dispElm = document.getElementById(this.value);
// if the element exists, then change the display to 'flex'
if (dispElm) {
dispElm.style.display = `flex`;
}
});

<section>
<div class="container">
<div class="row">
<div class="col">
<input type="date" id="start">
</div>
</div>
<div class="row output" id="2022-03-21" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>1</h4>
</div>
<div class="col">
<h4>2</h4>
</div>
</div>
</div>
</div>
<div class="row output" id="2022-03-22" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>3</h4>
</div>
<div class="col">
<h4>4</h4>
</div>
</div>
</div>
</div>
<div class="row output" id="2022-03-23" style="display: none;">
<div class="col">
<div class="row">
<div class="col">
<h4>5</h4>
</div>
<div class="col">
<h4>6</h4>
</div>
</div>
</div>
</div>
</div>
</section>