Javascript (NO 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. 您應該首先為所有 div 設置相同的class
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>

Answer 2

1) Get您點擊的單位的新狀態。

2) Set display:none所有單位。

3) 為您單擊的單元Set新狀態。

 function toggle(id) { var x = document.getElementById(id) ; var newStatus = (x.style.display === 'none') ? 'block' : 'none' ; var units = document.getElementsByClassName('units') ; for( var i = 0; i < units.length ; i++ ) units[i].style.display = 'none' x.style.display = newStatus ; }

 <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="units unit1" style="display: none;"> Hello World </div> <div id="unit2" class="units unit2" style="display: none;"> This is me </div> <div id="unit3" class="units unit3" style="display: none;"> Goodbye </div>