javascript - 在基本 javascript 中悬停和切换

Question

我有以下 JavaScript 代码用于使用 JQuery 的简单悬停：

$('.product_img_link').hover(function(){
  $(this).prev('.hoverProduct').show();
},function(){
  $(this).prev('.hoverProduct').hide();
});

div（使用 class找到前一个hoverProduct，并在悬停时显示它并在鼠标移出时隐藏它）。

如何在没有 JQuery 的情况下仅使用纯 JavaScript 编写此代码段？

Answer 1

像这样的东西：

var links = document.querySelectorAll('.product_img_link');

[].forEach.call(links, function(link) {
  var prev = link.previousSibling;
  link.addEventListener('mouseover', function() {
    prev.style.display == 'block';
  });
  link.addEventListener('mouseout', function() {
    prev.style.display == 'none';
  });
});

在带有选择器的 jQuery中，只有当它与选择器匹配时才会prev获取前一个元素。如果您想在普通 JS 中具有相同的行为，您可以像这样进行测试：

...
var prev = link.previousSibling;
var hasClass = /\bhoverProduct\b/.test(prev.className);

if (hasClass) {
  // events
}
...