Отображения блоков JS

188

12 августа 2018, 06:40

Есть разметка, хочу по клику по а,отображать блок, остальные скрыть.

<header>
    <a class="scroll" onclick="unmask(0)">
        <div class="right_top">Work</div>
    </a>
    <a class="scroll" onclick="unmask(1)">
        <div class="left_top">Mail</div>
    </a>
    <a class="scroll" onclick="unmask(2)">
        <div class="left_bottom">About</div>
    </a>
    <a class="scroll" onclick="unmask(3)">
        <div class="right_bottom">Contact</div>
    </a>
    <div class="center">Hi.</div>
</header>
<div id="blog0" class="about">
    blog0
</div>
<div id="blog1" class="work">
    blog1
</div>
<div id="blog2" class="mail">
    blog2
</div>
<div id="blog3" class="contact">
    blog3
</div>

Вот функция, но она не работает. В чем моя ошибка?

function unmask(blog) {
    for (var i; i < 4; i++) {
        if (blog === i) {
            document.getElementById(`blog${i}`).style.display = 'block';
        } else {
            document.getElementById(`blog${i}`).style.display = 'none';
        }
    }
}

Answer 1

Инициализируйте переменную счётчика в цикле, иначе будет проблема:
var i; определит i с значением undefined, в логическом контексте i < 4 это вернёт false и цикл даже не начнётся.

function unmask(blog) { 
  for (var i = 0; i < 4; i++) { 
    if (blog === i) { 
      document.getElementById(i).style.display = 'block'; 
    } else { 
      document.getElementById(i).style.display = 'none'; 
    } 
  } 
}

div[id] { 
  display: none; 
} 
a { 
  cursor: pointer; 
}

<header> 
  <a class="scroll" onclick="unmask(0)"> 
    <div class="right_top">Work</div> 
  </a> 
  <a class="scroll" onclick="unmask(1)"> 
    <div class="left_top">Mail</div> 
  </a> 
  <a class="scroll" onclick="unmask(2)"> 
    <div class="left_bottom">About</div> 
  </a> 
  <a class="scroll" onclick="unmask(3)"> 
    <div class="right_bottom">Contact</div> 
  </a> 
  <div class="center">Hi.</div> 
</header><br /> 
<div id="0" class="about"> 
  blog0 
</div> 
<div id="1" class="work"> 
  blog1 
</div> 
<div id="2" class="mail"> 
  blog2 
</div> 
<div id="3" class="contact"> 
  blog3 
</div>