在控制台中顯示數據集中的文本

Question

我試圖在控制台中顯示數據集中的特定文本值。 我使用mouseover和mouseout事件，並且使用循環，我能夠顯示所有數據文本，但不知道如何使js只顯示一個與懸浮文本相關聯的文本。

請看下面的代碼。 我想在控制台“ Tooltip1”中同時懸停工具提示[0]，在“ Tooltip2”中同時查看工具提示[1]，等等。 提前致謝！

<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>

Answer 1

在您的方法中，由於i值為tooltips.length-1 ，因此始終顯示最后的工具提示值。 原因是事件發生的時間，因為循環迭代已結束。

this.dataset.text將始終引用發生mouseover和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>

在控制台中顯示數據集中的文本

問題描述

1 個解決方案

解決方案1
1 已采納 2016-02-17 11:46:39

在控制台中顯示數據集中的文本

問題描述

1 個解決方案

解決方案1 1 已采納 2016-02-17 11:46:39

解決方案1
1 已采納 2016-02-17 11:46:39