Question

我正在使用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

Answer 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，所以我可以控制大小以确保它与图像大小相匹配。为了将内部DIV保持在图像的顶部，我必须为CSS格式化页面右侧的链接和左侧的链接做一个类，因为Squarespace模板如何作品。然后是外部DIV的类，为它添加CSS格式。

然后我把它放在另一个DIV中，以便能够将它放在我想要的页面上。如果不这样做，我就无法控制href环绕的DIV所在的位置，并且移动设备的网站格式在768px宽和640px宽的情况下也发生了变化，所以我不得不为这些实例调整CSS。 / p>

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

如何使用JQuery在Squarespace的Project Page上添加链接到图像

1 个答案: