如何使用 JQuery 在 Squarespace 中的项目页面上添加指向图像的链接答案

【问题标题】：How to add links to images on a Project Page in Squarespace using JQuery如何使用 JQuery 在 Squarespace 中的项目页面上添加指向图像的链接
【发布时间】：2017-08-14 17:16:51
【问题描述】：

我正在使用 Squarespace 开发一个网站。 Squarespace 的项目页面允许您添加带有标题和描述的图像，但您没有任何直接访问权限来编辑页面。他们目前不提供使图像点击的能力，所以我正在尝试使用 JQuery 自己将其添加到图像中。

这是我正在处理的网站页面：Prestigious Affairs

由于每次加载时 div id 都会发生变化，因此我尝试使用用于项目页面的图像类 (project-slide-image) 来定位它们，然后使用 .wrap() 添加 href。有人可以让我知道我做错了什么吗，因为它有点工作，但是整个部分都在跳动，并且它弄乱了所有左侧偏移图像的标题和描述。

$(function(){
    $("img.project-slide-image:eq(0)").wrap('<a href="/about-us/"></a>');
    $("img.project-slide-image:eq(1)").wrap('<a href="/events/"></a>');
    $("img.project-slide-image:eq(2)").wrap('<a href="/prom/"></a>');
    $("img.project-slide-image:eq(3)").wrap('<a href="/weddings/"></a>');
    $("img.project-slide-image:eq(4)").wrap('<a href="/floral/"></a>');
    $("img.project-slide-image:eq(5)").wrap('<a href="/contact-us/"></a>');
});

它似乎工作正常，虽然略有不同，这里：Code Snippet

【问题讨论】：

好的，我发现它破坏它的原因是因为他们将图像放在
标签内。因此，如果我将 href 包裹在整个
标签周围，它就可以工作。但现在我被一个超出实际图像的链接卡住了。任何人都可以建议一种仅使图像可点击的方法吗？

标签： javascript jquery html class squarespace

【解决方案1】：

所以，经过一番折腾，我设法找到了解决方案。我意识到这可能只与 Squarespace 有关，但也许代码在其他情况下对某人来说会派上用场，所以我会继续发布它。我最终使用 .insertBefore 而不是 .wrap ，因为这会导致问题。

这是我最终使用的 JQuery：

$(function(){
  $('<div class="mainLinksOuter"><a href="/about-us/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(0)"));  
  $('<div class="mainLinksOuter"><a href="/events/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(1)"));
  $('<div class="mainLinksOuter"><a href="/prom/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(2)"));
  $('<div class="mainLinksOuter"><a href="/weddings/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(3)"));
  $('<div class="mainLinksOuter"><a href="/floral/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(4)"));
  $('<div class="mainLinksOuter"><a href="/contact-us/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(5)"));
});

所以，我最终在 DIV 周围插入了 href，这样我就可以控制大小以确保它与图像大小匹配。由于 Squarespace 模板的方式，我必须为 CSS 格式化页面右侧的链接和左侧的链接设置一个单独的类，以便将内部 DIV 保持在图像的顶部作品。然后是一个用于外部 DIV 的类，用于为其添加 CSS 格式。

然后我把它放在另一个 DIV 中，以便能够将它定位在页面上我想要的位置。如果不这样做，我无法控制由 href 包围的 DIV 的最终位置，并且移动设备的网站格式更改为 768 像素宽和 640 像素宽，因此我必须针对这些实例调整 CSS。

所以，基本上，我最终得到的是一个空的 DIV，在每个图像的顶部都有一个 href 包围它，保留在它们的顶部并使用响应式设计调整大小。

【讨论】：