Question

我需要使用onClick(swiper,e)为Swiper JS中的链接错误制定解决方法。

swiper：整个狙击容器是否 e：是一个MouseEvent，其中属性target包含HTML字符串，例如<div class="start-time">16:00</div>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">
      <a href="abc" target="_blank">
        <div class="start-time">16:00</div>
        <div class="flag"><img ...></div>
        <div class="name col-4">Buritos</div>
      </a>
    </div>
    ...
  </div>
</div>

现在我需要阻止默认的Swiper行为，找到链接并打开一个新窗口。这段代码不起作用，但伪代码是我想要的

    onClick: function(swiper, e) {
        e.preventDefault();
        let target = $(e.target); // HTML is now jQuery
        let slide = target.closest('swiper-slide'); //Not working
        let link = slide.find('a').attr('href');
        window.open(link);
    },

当用户点击幻灯片中的任何元素时，我一直在找到父swiper-slide。我认为target.closest('swiper-slide')可以解决这个问题，但事实并非如此。

非常感谢任何帮助。

Answer 1

这应该有效：

onClick: function(swiper, e) {
    e.preventDefault();

    var hyperlink = $(e.target).closest('a');

    window.open(hyperlink.attr('href'));
},

Answer 2

您可以使用$.parents()从点击的元素遍历多个级别，并传递一个选择器以找到您想要的那个：

onClick: function(swiper, e) {
    e.preventDefault();
    let target = $(e.target); // HTML is now jQuery
    let slide = target.parents('.swiper-slide')[0];
    let link = slide.find('a').attr('href');
    window.open(link);
},

当我拥有HTML字符串X时，如何找到最接近的元素？

2 个答案: