jquery 将类添加到www.example.com的最近元素e.target

91zkwejq 于 2022-12-26 发布在 jQuery

关注(0)|答案(3)|浏览(144)

我尝试在一个字体很棒的图标旁边的超链接上添加一个抖动效果。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添加到与类"fas"匹配的i中，并在不悬停时删除它。
我不是很精通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");     
     });
});

我得到的错误是：
未捕获的类型错误：无法读取null的属性（正在读取"addClass"）
我还尝试了以下方法：

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

这不会给我带来任何错误，但它也不起作用。

jquery

来源：https://stackoverflow.com/questions/74894898/add-class-to-closest-element-of-e-target

3条答案

按热度按时间

vojdkbi01#

您需要向上遍历到共享父对象，然后找到图标

$(".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");
  }
});

赞(0）回复(0）举报 2022-12-26

bkhjykvo2#

可以使用.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>

赞(0）回复(0）举报 2022-12-26

b5buobof3#

这是可以实现的没有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>

赞(0）回复(0）举报 2022-12-26

我来回答

jquery 将类添加到www.example.com的最近元素e.target

3条答案

相关问题

热门标签

最新问答