Question

我正在尝试在控制台中显示数据集中的特定文本值。我使用mouseover和mouseout事件，并且使用循环，我能够显示所有数据文本，但不知道如何使js显示为单一，与被覆盖的文本相关联。

请查看下面的代码。我想在控制台“Tooltip1”中看到工具提示[1]时悬停工具提示[0]，“工具提示2”等等。提前谢谢！

public func navigationController(navigationController: UINavigationController, willShowViewController viewController: UIViewController, animated: Bool) { 
    if self.viewControllerCount - 1 == self.rootController.viewControllers.count {
       // Pop action, do additional logic
   }
}

Answer 1

在您的方法中，当i的值为tooltips.length-1时，将始终显示上一个工具提示值。原因是时间事件发生，循环迭代结束。

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>

在控制台中显示数据集中的文本

1 个答案: