javascript - 在新选项卡中打开 Squarespace 幻灯片画廊

Question

我正在尝试在新选项卡中打开幻灯片上显示的单个图像，我已经使用 jQuery 成功完成了这一操作，但问题仍然存在于悬停在图像上的元数据中。单击元时，页面会将用户重定向到同一选项卡而不是新选项卡。

我尝试的是使用 $('.slide .meta') 抓取元元素，并使用 event.preventDefault() 阻止元元素被点击在click()中。点击已被识别，但它仍然允许页面加载我认为很奇怪的网址。因此，任何帮助将不胜感激!

这是适用于图像的 jQuery 代码片段:

<script>

  // Make sure the page is loaded
  // before running the script
  $(document).ready(function() {

    // Grab the gallary container's link
    $('.sqs-gallery-container a').click(function(event) {

      // Get the link element
      var href = $(this).attr('class');

      // Add the attribute '_blank' to open the
      // generic link to that new tab
      $(this).attr('target', '_blank');

        // Grab the link
        var link = $(this).attr('href');

        // Check if the link isn't equal to '#'
        if(link !== '#'){
          // Open the page
          window.open(link);
        }

      // Prevent the gallary from opening the link
      // and let us do our own thing!
      event.preventDefault();
   });

  }); // end ready

</script>

这是从 Chrome 控制台复制的幻灯片库片段:

https://gist.github.com/iwatakeshi/95fc070a668198566588

可以在此处找到幻灯片示例:

https://help.squarespace.com/guides/using-the-slideshow-gallery-block

或实际画廊:

Answer 1

您是否尝试过将 event.preventDefault() 移动到 block 的顶部？所以你的代码将变成:

<script>
$(document).ready(function() {
    $('.sqs-gallery-container a').click(function(event) {
        event.preventDefault(); // preventDefault first
        var link = $(this).attr('href');

        if(link != '#'){
            window.open(link);
        }
    });
});
</script>

您还有一个未使用的变量 href，我已将其删除。