当一个元素可见时隐藏所有元素

Question

'嗨，当我点击“a”元素时，我只想显示一个 div（其他 div 应该隐藏）。 现在，当我单击

"box1"

时，会显示

.dayone

，下一步...当我单击

"box2"

时，我会看到

.dayone

和

.daytwo

。'

function openInfo1() {
  const currentTime = new Date()
  const day = currentTime.getDate()
  if (day > 1) {
    document.querySelector(".dayone").style.display = "flex";
  }
}

function openInfo2() {
  const currentTime = new Date()
  const day = currentTime.getDate()
  if (day > 2) {
    document.querySelector(".daytwo").style.display = "flex";
  }
}

function openInfo3() {
  const currentTime = new Date()
  const day = currentTime.getDate()
  if (day > 3) {
    document.querySelector(".daythree").style.display = "flex";
  }
}

.dayone,
.daytwo,
.daythree {
  display: none;
}

<div class="txtelem">
  <div class="dayone">1</div>
  <div class="daytwo">2</div>
  <div class="daythree">3</div>
</div>
<div class="boxelem">
  <a class="box1" onclick="openInfo1()">
    <img class="nb1" src="//placehold.co/50" />
  </a>
  <a class="box2" onclick="openInfo2()">
    <img class="nb2" src="//placehold.co/51" />
  </a>
  <a class="box3" onclick="openInfo3()">
    <img class="nb3" src="//placehold.co/52" />
  </a>
</div>

Answer 1

简化和授权

window.addEventListener('DOMContentLoaded', () => { // when elements are available on the page
  const boxContainer = document.querySelector('.boxelem');
  const divs = document.querySelectorAll('.txtelem .day')
  boxContainer.addEventListener('click', (e) => {
    const tgt = e.target.closest('a.box');
    if (!tgt) return; // not a box link
    // const day = new Date().getDate(); // this will get 1 to 31 - if you want day (sun-sat) use getDay() which will return 0 to 6
    // but you do not seem to want to use days, but instead use the links
    const whatDiv = tgt.dataset.target;
    divs.forEach(div => div.hidden = div.id !== whatDiv); // hide what does not match the clicked data-target
  });
});

<div class="txtelem">
  <div class="day" id="dayone">1</div>
  <div class="day" id="daytwo" hidden>2</div>
  <div class="day" id="daythree" hidden>3</div>
</div>
<div class="boxelem">
  <a href="#" class="box" data-target="dayone"><img 
    class="nb" src="https://placehold.co/50x50?text=Day+One" /></a>
  <a href="#" class="box" data-target="daytwo"><img 
    class="nb" src="https://placehold.co/50x50?text=Day+Two" /></a>
  <a href="#" class="box" data-target="daythree"><img 
    class="nb" src="https://placehold.co/50x50?text=Day+Three" /></a>
</div>