根据 DatePicker 的日期更改隐藏和显示元素

Question

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

当我删除“无”的日期时，之前的日期开始相互堆叠。

有没有办法简化 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. 如果不为空，则可以将显示更改为“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>