Javascript(无 JQUERY)切换 Div

Question

我正在尝试使用图像映射切换多个 div。我的最终目标是:

1. 从隐藏所有 div 开始
2. 点击一个 div 进行切换和显示
3. 单击不同的 div 以显示第二个 div，但隐藏所有其他 div
4. 单击我选择的最后一个 div 以隐藏该 div

我是 Javascript 的新手。从字面上看，我花了很长时间才了解如何创建一个功能来切换。我不会使用 JQUERY，所以请不要提供任何需要我使用该库的解决方案。

function toggle(id) {
  var x = document.getElementById(id)
  if(x.style.display =='none')
    x.style.display = 'block';
  else x.style.display = 'none'; 
}

<img id="Image-Maps-Com-image-maps-2019-03-13-221105" src="https://picsum.photos/349/290" border="0" width="349" height="290" orgWidth="349" orgHeight="290" usemap="#image-maps-2019-03-13-221105" alt="" />
<map name="image-maps-2019-03-13-221105" id="ImageMapsCom-image-maps-2019-03-13-221105">
<area alt="" title="" href="#" onclick="toggle('unit1')" shape="rect" coords="9,164,152,263" style="outline:none;" target="_self" />
<area alt="" title="" href="#" onclick="toggle('unit2')" shape="rect" coords="198,175,328,273" style="outline:none;" target="_self" />
<area alt="" title="" href="#" onclick="toggle('unit3')" shape="rect" coords="55,25,291,132" style="outline:none;" target="_self" />
<area shape="rect" coords="347,288,349,290" alt="Image Map" style="outline:none;" title="image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>

<div id="unit1" class="unit1" style="display: none;">
Hello World
</div>

<div id="unit2" class="unit2" style="display: none;">
This is me
</div>

<div id="unit3" class="unit3" style="display: none;">
Goodbye
</div>

Answer 1

您可以通过以下步骤实现。

1. 你应该首先拥有相同的class对于你所有的 div
2. 使用querySelectorAll()并隐藏类的所有元素
3. 然后您搜索所需的 id使用三元运算符。
4. 你应该得到所有<area>并使用 addEventListener()而不是 onclick = toggle(...)

document.querySelectorAll('area[alt]').forEach((a,i) =>
{
   a.addEventListener('click',(e) => {
    e.preventDefault();
    var x = document.getElementById(`unit${i+1}`)  
    let {display} = x.style
    document.querySelectorAll('.unit').forEach(z => z.style.display = 'none')
    x.style.display = display === 'none' ? 'block' : 'none';
   })
})

<img id="Image-Maps-Com-image-maps-2019-03-13-221105" src="https://picsum.photos/349/290" border="0" width="349" height="290" orgWidth="349" orgHeight="290" usemap="#image-maps-2019-03-13-221105" alt="" />
<map name="image-maps-2019-03-13-221105" id="ImageMapsCom-image-maps-2019-03-13-221105">
<area alt="" title="" href="#" shape="rect" coords="9,164,152,263" style="outline:none;" target="_self" />
<area alt="" title="" href="#"  shape="rect" coords="198,175,328,273" style="outline:none;" target="_self" />
<area alt="" title="" href="#"  shape="rect" coords="55,25,291,132" style="outline:none;" target="_self" />
<area shape="rect" coords="347,288,349,290" alt="Image Map" style="outline:none;" title="image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>

<div id="unit1" class="unit" style="display: none;">
Hello World
</div>

<div id="unit2" class="unit" style="display: none;">
This is me
</div>

<div id="unit3" class="unit" style="display: none;">
Goodbye
</div>