Question

我有WP Bakery的Post Masonry Grid创建的以下标签：

<a href="https://www.domain.nl/some-page/" class="vc_gitem-link vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-modern vc_btn3-o-empty vc_btn3-color-grey" title="some value in the title"><span class="vc_btn3-placeholder">&nbsp;</span></a>

当该链接悬停时，网格项目上会出现一个彩色的叠加层。在移动设备上，此效果不可见。我想要的是，当用户单击此链接时，该链接激活之前将出现叠加层。我已经尝试了以下jQuery代码：

$('.project-item .vc_btn3-container a').click(function(event) {
        // Remember the link href
        var href = this.href;

        // Don't follow the link
        event.preventDefault();

        // Do the async thing
        overlayActive(function() {
            if($(window).width() <= 480) {
                console.log('it works');
                $(this).parent().parent().find('project-overlay-color').css('transform', 'scale(1,1)');
                // go to the link
                window.location = href;
            }
        });
    });

这不适用于任何浏览器。另外，我在控制台日志中找不到“它有效”。我尝试将其放置在click函数中，但控制台日志仍然为空。

当我在Chrome中使用检查器并将其设置为移动设备（例如iphone X）时，当我单击链接时，会在激活链接之前显示叠加层。但是，在我自己的移动设备上，不会显示叠加层。

如何在激活链接并导航到页面之前显示叠加层？

Answer 1

您的选择器错误vc_btn3-container不存在。试试这个：

JS

$('.vc_gitem-link').click(function(event) {
  // Remember the link href
  var href = this.href;

  // Don't follow the link
  event.preventDefault();

  // Do the async thing
  overlayActive(function() {
    if($(window).width() <= 480) {
      console.log('it works');
      $(this).parent().parent().find('project-overlay-color').css('transform', 'scale(1,1)');
      // go to the link
      window.location = href;
    }
  });
});

Demo

event.preventDefault（）在任何浏览器中均不起作用

1 个答案: