如何解决EventLister自变量在forEach工具提示中出现错误
我一直在尝试构建一个更简单的基于JavaScript的工具提示。经过反复试验和大量搜索之后,我发现了Daniel Imms post。
我一直在codepen上进行这项工作。我还有一个earlier codepen,它完整地保留了Daniel Imms的原始JS,并且在控制台中未显示任何错误。
我更改了结构,以使用forEach添加事件侦听器,并使用箭头功能尝试使语法高效。不幸的是,我做错了事,起初并没有选择,因为该工具提示仅在HTML和CSS中起作用。我仍然需要Javascript来控制硬编码的X Y位置,但是我不希望它跟随光标。
我在codepen
中看到的错误是:
TypeError:EventTarget.addEventListener:至少需要2个参数,但仅传递了1个
和
SyntaxError:期望的表达式,得到了')'
非常感谢所有帮助。
以及:
“消息”:“ TypeError:工具提示未定义”,
请参阅所附的代码:
var tooltips = document.querySelectorAll('.tooltip span').forEach(item => {
item.addEventListener('mouSEOver',event => {
tooltips.style.top = '40px';
tooltips.style.left = '80px';
})
})
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
.infoBox
{
background: pink;
padding: 0.5%;
width: 290px;
height: 40px;
display: block;
}
<a class="tooltip">
<img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
<span>
<div class="infoBox">TEST</div>
</span>
</a>
<a class="tooltip">
<img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
<span>
<div class="infoBox">TEST2</div>
</span>
</a>
<a class="tooltip">
<img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
<span>
<div class="infoBox">TEST3</div>
</span>
</a>
解决方法
您正在将forEach
的返回值分配给tooltips
,并且返回值始终为undefined
。
您需要将document.querySelectorAll('.tooltip span')
的值分配给tooltips
变量并按如下方式实现forEach
。
var tooltips = document.querySelectorAll('.tooltip span');
tooltips.forEach(item => {
item.addEventListener('mouseover',event => {
tooltips.style.top = '40px';
tooltips.style.left = '80px';
})
})
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
.infobox
{
background: pink;
padding: 0.5%;
width: 290px;
height: 40px;
display: block;
}
<a class="tooltip">
<img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
<span>
<div class="infobox">TEST</div>
</span>
</a>
<a class="tooltip">
<img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
<span>
<div class="infobox">TEST2</div>
</span>
</a>
<a class="tooltip">
<img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
<span>
<div class="infobox">TEST3</div>
</span>
</a>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。