Question

将类添加到 e.target 的最近元素

2022-12-22

636

html jquery font-awesome

我尝试在将鼠标悬停在 font-awesome 图标旁边的超链接上时为其添加抖动效果。 HTML 如下所示：

<div class="icon-hyperlink">
     <span>
          <i class="fas fa-phone p-2"></i>
     </span>

     <span>
          <a href="tel:XXXX XX XX XX">John: XXXX XX XX XX</a>
     </span>
</div>

我尝试将类 fa-shake 添加到匹配的 i 中，类名为“fas”，并在不悬停时将其删除。

我对 jQuery 不是很精通，但我阅读了很多文档和其他 stackoverflow 文章来让它工作，但无济于事。

我当前的代码是：

$(document).ready(function() {
     $(".icon-hyperlink a").hover(function(e) {
          e.target.closest(".fas").addClass("fa-shake");
     }, function(e) {
          e.target.closest(".fas").removeClass("fa-shake");     
     });
});

我收到的错误是：

Uncaught TypeError: Cannot read properties of null (reading 'addClass')

我还尝试了以下操作：

$(e.target.closest(".fas")).addClass("fa-shake");

这没有给我任何错误，但它也不起作用。

Answer 1

您需要遍历到共享父级，然后找到图标

$(".icon-hyperlink a").hover(
  function () {
    $(this).closest(".icon-hyperlink").find(".fas").addClass("fa-shake");
  },
  function () {
    $(this).closest(".icon-hyperlink").find(".fas").removeClass("fa-shake");
  }
);

如上所述， <span> 元素似乎没有必要，只会使问题复杂化。

此外，现在是 2022 年，您可能不需要 jQuery。

document.addEventListener("mouseenter", (e) => {
  if (e.target.matches(".icon-hyperlink a")) {
    e.target
      .closest(".icon-hyperlink")
      .querySelector(".fas")
      ?.classList.add("fa-shake");
  }
});

document.addEventListener("mouseleave", (e) => {
  if (e.target.matches(".icon-hyperlink a")) {
    e.target
      .closest(".icon-hyperlink")
      .querySelector(".fas")
      ?.classList.remove("fa-shake");
  }
});

Answer 2

您可以改用 .parents() 和 .find() 来选择您尝试查找的 .fas 元素。

请忽略我所做的 html 和 css 更改，它们只是为了演示 js。 .fas 元素不会摇晃，而是会变成红色。

$(document).ready(function() {

        $(".icon-hyperlink a").hover(function(e) {
                $(e.target).parents(".icon-hyperlink").find(".fas").addClass("fa-shake");
        }, function(e) {
                $(e.target).parents(".icon-hyperlink").find(".fas").removeClass("fa-shake");     
        });

  });

.fa-shake {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon-hyperlink">
        <span>
                <i class="fas fa-phone p-2">Icon</i>
        </span>
        <span>
                <a href="tel:XXXX XX XX XX">John: XXXX XX XX XX</a>
        </span>
</div>

Answer 3

这可以在不使用 javascript 的情况下实现，并且只需对 FA 在幕后使用的内容进行一些侦查工作即可。

.phone::before{
  font-family: "Font Awesome 6 Free";
  content: "\f095";
  display:inline-block;
  font-weight:900;
  color:black;
  margin-right:0.25em;  
}

.phone:hover::before{
  animation-name: fa-shake;
  animation-duration: var(--fa-animation-duration,1s);
  animation-iteration-count: var(--fa-animation-iteration-count,infinite);
  animation-timing-function: var(--fa-animation-timing,linear);
  animation-delay: var(--fa-animation-delay,0s);
  animation-direction: var(--fa-animation-direction,normal);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div class="icon-hyperlink">
  <a href="tel:XXXX XX XX XX" class="phone">John: XXXX XX XX XX</a>
</div>