我正在尝试在控制台中显示数据集中的特定文本值。我使用 mouseover 和 mouseout 事件，并且使用循环，我能够显示所有数据文本，但不知道如何使 js 仅显示单个数据文本，并与悬停文本绑定(bind)在一起。
请看下面的代码。我希望在悬停工具提示 [0] 时在控制台中看到“Tooltip1”，在工具提示 [1] 时看到“Tooltip2”，依此类推。提前致谢!
<html>
<body>
<p>
Lorem ipsum dolor sit amet enim. <span class="tooltip" data-text="Tooltip1"> Etiam ullamcorper.</span>Suspendisse a pellentesque dui, non felis. <span class="tooltip" data-text="Tooltip 2">Maecenas malesuada elit lectus</span> felis, malesuada ultricies. Curabitur et ligula.<span class="tooltip" data-text="Tooltip 3">Ut molestie a, ultricies porta urna.</span> Vestibulum
</p>
</body>
</html>
<script>
document.addEventListener("DOMContentLoaded", function() {
var tooltips = document.querySelectorAll(".tooltip");
var tooltipsValue = [];
console.log(tooltips);
for (var i = 0; i < tooltips.length; i++) {
var dataTags = tooltips[i].dataset.text;
tooltipsValue.push(dataTags);
//console.log(i);
//console.log(tooltipsValue);
//console.log(dataTags);
//tooltips[i].dataset.text;
//var dataTag = tooltips[i].dataset.text;
//console.log(tooltips[i].dataset.text);
tooltips[i].addEventListener('mouseover', function() {
//console.log("text while mouseover");
//console.log(tooltipsValue[i]);
});
tooltips[i].addEventListener('mouseout', function() {
//console.log("text after mouseout");
});
}
});
</script>
最佳答案
In your approach, last tooltip value will be displayed all the time as value of
iistooltips.length-1. Reason is by the time event takes place, for loop iteration is over.
this.dataset.text 将始终引用发生 mouseover 和 mouseout 的当前元素。
document.addEventListener("DOMContentLoaded", function() {
var tooltips = document.querySelectorAll(".tooltip");
var tooltipsValue = [];
for (var i = 0; i < tooltips.length; i++) {
var dataTags = tooltips[i].dataset.text;
tooltipsValue.push(dataTags);
tooltips[i].addEventListener('mouseover', function() {
console.log(this.dataset.text);
});
tooltips[i].addEventListener('mouseout', function() {
console.log(this.dataset.text);
});
}
});.tooltip {
color: red;
}<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<p>
Lorem ipsum dolor sit amet enim. <span class="tooltip" data-text="Tooltip1"> Etiam ullamcorper.</span>Suspendisse a pellentesque dui, non felis. <span class="tooltip" data-text="Tooltip 2">Maecenas malesuada elit lectus</span> felis, malesuada ultricies.
Curabitur et ligula.<span class="tooltip" data-text="Tooltip 3">Ut molestie a, ultricies porta urna.</span> Vestibulum
</p>您可以使用 closure为了达到相同的结果，闭包是一个内部函数，可以访问外部(封闭)函数的变量
document.addEventListener("DOMContentLoaded", function() {
var tooltips = document.querySelectorAll(".tooltip");
var tooltipsValue = [];
for (var i = 0; i < tooltips.length; i++) {
var dataTags = tooltips[i].dataset.text;
tooltipsValue.push(dataTags);
tooltips[i].addEventListener('mouseover', (function(i) {
return function() {
console.log(tooltips[i].dataset.text)
}
})(i));
tooltips[i].addEventListener('mouseout', (function(i) {
return function() {
console.log(tooltips[i].dataset.text)
}
})(i));
}
});.tooltip {
color: red;
}<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<p>
Lorem ipsum dolor sit amet enim. <span class="tooltip" data-text="Tooltip1"> Etiam ullamcorper.</span>Suspendisse a pellentesque dui, non felis. <span class="tooltip" data-text="Tooltip 2">Maecenas malesuada elit lectus</span> felis, malesuada ultricies.
Curabitur et ligula.<span class="tooltip" data-text="Tooltip 3">Ut molestie a, ultricies porta urna.</span> Vestibulum
</p>关于javascript - 在控制台中显示数据集的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35455754/