将 jQuery 转换为 Vanilla JS

Question

我需要一些帮助将此 jQuery 转换为纯 JavaScript，这是我必须转换的最后一个，以便我可以从我的项目中完全删除 jQuery。

function hoverFunc(e) {
  gsap.to(ball, {duration: 0.3, opacity: 1, scale: 0});
  gsap.to(ball, {duration: 0.3, scale: 0.5});
}

function unhoverFunc(e) {
  gsap.to(ball, {duration: 0.3, opacity: 1, scale: 1});
  gsap.to(ball, {duration: 0.3, scale: 1});
}

$("a").hover(hoverFunc, unhoverFunc);

Answer 1

您可以将querySelectorAll和addEventListener用于 mouseover/mouseleave 作为

 var atags= document.querySelectorAll('a');

    atags.forEach(function(a) {
      a.addEventListener('mouseover', hoverFunc);
      a.addEventListener('mouseleave', unhoverFunc);
    })

Answer 2

只是想用一个内联代码示例来说明 Hien 的示例，以便您可以运行下面的代码片段并查看它的工作情况。 在这里，我添加了 3 个链接，hover function 向链接添加了 2 个单独的类，然后通过悬停 function 将其删除。

 var atags= document.querySelectorAll('a'); function hoverFunc(e) { e.target.classList.add('hover', 'test') } function unhoverFunc(e) { e.target.classList.remove('hover', 'test') } atags.forEach(function(link) { link.addEventListener('mouseover', hoverFunc); link.addEventListener('mouseleave', unhoverFunc); })

 a { display: inline-block; padding: 1rem; } a.hover { background-color: rebeccapurple; color: white; } a.test { border: 3px solid black; }

 <a href="/">Link 1</a> <a href="/">Link 2</a> <a href="/">Link 3</a>

Answer 3

这样的事情应该工作

function hoverFunc(e) {
  gsap.to(ball, {duration: 0.3, opacity: 1, scale: 0});
  gsap.to(ball, {duration: 0.3, scale: 0.5});
}

function unhoverFunc(e) {
  gsap.to(ball, {duration: 0.3, opacity: 1, scale: 1});
  gsap.to(ball, {duration: 0.3, scale: 1});
}

var a = documet.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
  a[i].mouseover = hover;
  a[i].mouseout = unhover;
}