javascript - 单击链接/元素时如何制作弹出文本？

Question

我很抱歉向网络开发人员提出了非常直接的问题...非常感谢您的帮助!

我有一个图像，我使用 <\map> 将其分成几个部分

示例:

<map name="guessing_game">

<area alt="" title="" href="#1" shape="poly" coords="709,202,714,187,687,161,655,138,628,90,621,59,630,35,640,19,661,12,686,12,705,17,722,31,729,36,751,22,774,18,801,26,817,33,832,65,821,109" />


 <area alt="" title="" href="#2" shape="poly" coords="275,363,280,350,240,317,202,268,189,227,200,193,219,178,247,178,264,175,285,193,295,204,313,189,342,183,369,186,392,202,400,231,395,267,363,309" />

<area alt="" title="" href="#3" shape="poly" coords="554,364,557,351,520,318,473,260,468,227,471,203,481,187,506,178,521,174,548,180,562,189,569,203,579,201,594,186,626,182,651,186,668,207,676,235,668,263,646,299" />
</map>

我想做一个和 this example 一样的弹出效果

因此，如果有人点击链接/aria，他们会看到不同的对话框......弹出气泡的位置不同。

不幸的是，我遇到了一个问题，如果我尝试使用多个文本变体......使用上面的示例，无论我单击哪个链接/咏叹调，它总是会返回相同的文本。

<style>
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}





/* The actual popup */
.popup .popuptext1 {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center; 
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -810px;  
    margin-bottom: 320px; 
}


.popup .popuptext2 {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center; 
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -520px;  
    margin-bottom: 300px;
}



/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
</style>


<script>
// When the user clicks on div, open the popup
function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}


function myFunction() {
    var popup = document.getElementById("myPopup2");
    popup.classList.toggle("show");
}


</script>




<img src="./image.jpg" alt="Picture" style="width:auto;max-width:100%" usemap="#guessing_game">


<map name="guessing_game">


<div class="popup" onclick="myFunction()">
  <span class="popuptext1" id="myPopup"><strong>Header</strong><br> First variation</span>

 <area alt="Header" title="Header" shape="poly" coords="122,200,125,184,94,159,63,129,42,91,31,59,38,40,59,10,89,10,111,12,132,24,140,38,153,25,174,15,210,18,230,28,245,55,246,87,224,124,178,161" />
</div>

<div class="popup" onclick="myFunction()">
  <span class="popuptext2" id="myPopup2"><strong>Header 2</strong><br>Second text variation </span>
 <area alt="Header 2" title="Header 2" shape="poly" coords="417,200,419,183,389,160,336,97,327,61,339,26,356,14,380,11,404,13,418,20,432,34,450,28,477,17,508,19,535,41,536,81,525,112" />
</div>

请帮忙...我对这样一个基本问题感到非常抱歉...我确信 CSS 或 javascript 函数中有一个巨大而简单的错误

Answer 1

你应该是passing in the context of this到你的 onclick 处理程序

onclick="myFunction(this)

function myFunction(el) {
console.log(el);
    var popup = el;
    popup.classList.toggle("show");
}