Как можно сократить код через цикл for и сделать его одной функцией?

Question

document.getElementById('Day1').onclick = function() {

  let showMsg = document.querySelectorAll('.content');
  for (let i = 0; i < showMsg.length; i++) {
    let msg = showMsg[i];
    msg.style.display = 'none';
  }
  document.getElementById('content1').style.display = "flex";
}


document.getElementById('Day2').onclick = function() {

  let showMsg = document.querySelectorAll('.content');
  for (let i = 0; i < showMsg.length; i++) {
    let msg = showMsg[i];
    msg.style.display = 'none';
  }
  document.getElementById('content2').style.display = "flex";

}


document.getElementById('Day3').onclick = function() {

  let showMsg = document.querySelectorAll('.content');
  for (let i = 0; i < showMsg.length; i++) {
    let msg = showMsg[i];
    msg.style.display = 'none';
  }
  document.getElementById('content3').style.display = "flex";
}

<div class="container">
  <div class="head">
    <div class="home">home</div>
    <div class="hdr">
      <div class="Day" id="Day1">Day 1</div>
      <div class="Day" id="Day2">Day 2</div>
      <div class="Day" id="Day3">Day 3</div>
      <div class="Day" id="Day4">Day 4</div>
      <div class="Day" id="Day5">Day 5</div>
      <div class="Day" id="Day6">Day 6</div>
      <div class="Day" id="Day7">Day 7</div>
    </div>
  </div>
  <div class="base">
    <div class="content" id="content1">1</div>
    <div class="content" id="content2">2</div>
    <div class="content" id="content3">3</div>
    <div class="content" id="content4">4</div>
    <div class="content" id="content5">5</div>
    <div class="content" id="content6">6</div>
    <div class="content" id="content7">7</div>
  </div>
</div>

Answer 1

function something() {
    document.querySelectorAll('.content').forEach((message) => {
        message.style.display = 'none';
    });

    document.getElementById('content1').style.display = 'flex';
}

document.getElementById('Day2').addEventListener('click', something);
document.getElementById('Day3').addEventListener('click', something);

Answer 2

Можно что-то такое сделать..

let days = document.querySelectorAll('.Day');

for (elem of days) {
  elem.addEventListener('click', function() {
    const i = [...this.parentElement.children].indexOf(this) + 1;
    document.querySelector('#content' + i).classList.toggle('visible');
  });
}

.Day {
  cursor: pointer;
  background: rgba(0, 255, 0, 0.4);
}
.Day:hover {
  background: rgba(0, 255, 0, 0.3);
}
.content {
  display: none;
}
.visible {
  display: flex;
  background: rgba(0, 255, 255, 0.3);
}

<div class="container">
  <div class="head">
    <div class="home">home</div>
    <div class="hdr">
      <div class="Day" id="Day1">Day 1</div>
      <div class="Day" id="Day2">Day 2</div>
      <div class="Day" id="Day3">Day 3</div>
      <div class="Day" id="Day4">Day 4</div>
      <div class="Day" id="Day5">Day 5</div>
      <div class="Day" id="Day6">Day 6</div>
      <div class="Day" id="Day7">Day 7</div>
    </div>
  </div>
  <div class="base">
    <div class="content" id="content1">1</div>
    <div class="content" id="content2">2</div>
    <div class="content" id="content3">3</div>
    <div class="content" id="content4">4</div>
    <div class="content" id="content5">5</div>
    <div class="content" id="content6">6</div>
    <div class="content" id="content7">7</div>
  </div>
</div>

Answer 3

Тут бы не плохо использовать какую-то другую связь между элементами, например, data-* атрибуты, но если нужно исходить из имеющегося кода разметки и, если связь должна быть именно по ID, а не порядку элементов в двух группах, то могу предложить такой вариант:

const contents = document.querySelectorAll('.content');
document.querySelectorAll('.Day').forEach(day => {
  day.addEventListener('click', ({ target }) => {
    let contentId = target.id.replace('Day', 'content');
    contents.forEach(cont => cont.style.display = cont.id === contentId ? 'flex' : 'none');
  });
});

<div class="container">
  <div class="head">
    <div class="home">home</div>
    <div class="hdr">
      <div class="Day" id="Day1">Day 1</div>
      <div class="Day" id="Day2">Day 2</div>
      <div class="Day" id="Day3">Day 3</div>
      <div class="Day" id="Day4">Day 4</div>
      <div class="Day" id="Day5">Day 5</div>
      <div class="Day" id="Day6">Day 6</div>
      <div class="Day" id="Day7">Day 7</div>
    </div>
  </div>
  <div class="base">
    <div class="content" id="content1">1</div>
    <div class="content" id="content2">2</div>
    <div class="content" id="content3">3</div>
    <div class="content" id="content4">4</div>
    <div class="content" id="content5">5</div>
    <div class="content" id="content6">6</div>
    <div class="content" id="content7">7</div>
  </div>
</div>

БЛОГ НА HUSL

Как можно сократить код через цикл for и сделать его одной функцией?

Ответы (3 шт):