我一直在使用 w3school 工具提示代码让工具提示在单击某些内容后出现。我设法让弹出窗口出现在每个可点击的元素上(在本例中它只是一些简单的文本),但问题是它总是出现在同一个地方。工具提示不会出现在被单击的文本的正上方,它总是出现在第一个文本的上方。
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div><br><br><br>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div> <br><br><br>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div><br><br><br>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div><br><br><br>
.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 .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: relative
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* 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 ;}
}
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
这是带有工作演示的 jsfiddle 的链接: https://jsfiddle.net/codingcoder96/qcxshej0/
最佳答案
您的代码中有一些错误:
元素的 ID 属性在整个 HTML 页面中必须是唯一的。在您的代码中,许多元素具有相同的 ID。
我不会使用 onclick="" - 我会在 JS 代码中添加一个 eventListener(它有助于将 JS 与 HTML 解耦)
// "grabbing" the popups
const popups = document.querySelectorAll('.popup')
// adding a click eventListener to every popup container
popups.forEach(e => {
e.addEventListener('click', function(ev) {
togglePopup(this)
})
})
// getting the child of the container
// and toggling show class
function togglePopup(container) {
// [id^=myPopup] is a traditional CSS selector, that selects
// all elements whose ID begins with "myPopup"
// by calling querySelector on the container, we only look
// for elements that are child nodes of the container
// so the CSS selector is narrowed down to those elements
container.querySelector('[id^=myPopup]').classList.toggle('show')
}
.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 .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: relative z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* 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;
}
}
<div class="popup">Click me to toggle the popup!
<span class="popuptext" id="myPopup1">A Simple Popup! 1</span>
</div><br><br><br>
<div class="popup">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup! 2</span>
</div><br><br><br>
<div class="popup">Click me to toggle the popup!
<span class="popuptext" id="myPopup3">A Simple Popup! 3</span>
</div><br><br><br>
<div class="popup">Click me to toggle the popup!
<span class="popuptext" id="myPopup4">A Simple Popup! 4</span>
</div><br><br><br>
关于javascript - 每次点击创建单独和独特的工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57499354/