JavaScript 不适用于单个 HTML 页面上的所有选项卡

Question

所以我正在开发一个网站，该网站应该包含一些交互式图片 map ，您可以将鼠标悬停在 map 上，它会显示信息。但我遇到的问题是我的 Javascript 无法在页面上的所有选项卡上工作，它只在第一个选项卡上工作，我无法弄清楚原因。一开始我以为是因为我两次调用 map 和覆盖 ID，但我通过添加 map1 和 overlay1 进行了更改，这样就没有重叠了。

     $('area').each(function(){
        var area = $(this),
            alt = area.attr('alt');
		area.mouseenter(function(){
            $('#overlay').html(alt);
        }).mouseleave(function(){
		    $('#overlay').html('');

		});
	});
    
    function openEmail(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
    document.getElementById(cityName).style.display = "block";
     evt.currentTarget.className += " active";

    }	

    
    #map {
        position: relative;
    }
    #overlay {
        position: absolute;
        background: #000;
        color: #fff;
        top: 20px;
        left: 20px;
    }

    #map1 {
        position: relative;
    }

    #overlay1 {
        position: absolute;
        background: #000;
        color: #fff;
        top: 20px;
        left: 20px;
    }		

    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }				
   
			

<figure class = "tab">
    <button class = "tablinks" onclick = "openEmail(event, 'phishing')">Classic Phishing</button>
  <button class = "tablinks" onclick = "openEmail(event, 'ceo-scam')">CEO Scam</button>
</figure>

<figure id = "phishing" class = "tabcontent">

  <!-- where the phishing map is -->
  <figure id = "map">
      <figure id = "overlay"></figure>
    <img src = "" width = "805" height = "531" alt = "classic-phishing" usemap = "#phishingmap" />	
  </figure>
  <!-- map with the coordinates and the alt that text is displayed -->
  <map name = "phishingmap">
    <area href = "" alt="You need to check where the email originated from since anybody can spoof an email address." title="" shape="rect" coords="74,29,261,51"/>
    </map>
</figure> 
<figure id = "ceo-scam" class = "tabcontent">
    <!-- where the phishing map is -->
  <figure id = "map1">
    <figure id = "overlay1"></figure>
    <img src = "" width = "860" height = "400" alt = "ceo-scam" usemap = "#ceomap" />	
  </figure>
  <!-- map with the coordinates and the alt that text is displayed -->
  <map name = "ceomap">
    <area href = "" alt="This looks like an email within the company, however you need to be careful with anything you receive. Always check email headers to see where an email actually originated from." title="from-boss" coords="85,32,261,58" shape="rect"/>
    </map>
</figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

处理鼠标悬停的代码针对具有 id overlay 的元素。第二个选项卡的 ID 为 overlay1。一种解决方案是向两个图形添加一个类，并在处理 mouseenter 事件的 JS 的第一部分中以该类为目标。