使用 javascript 或 jquery 将类添加到 Squarespace 中的图像答案

【问题标题】：Add class to image in Squarespace using javascript or jquery使用 javascript 或 jquery 将类添加到 Squarespace 中的图像
【发布时间】：2018-01-22 23:04:33
【问题描述】：

我认为这很容易。我将此代码注入添加到标题中。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>$("img").addClass("example")</script>

脚本出现在我的页面源代码中，但对图像添加类无效。我尝试了非常具体的 div 类和 id 以及其他脚本变体，但同样没有效果。

Squarespace 是否会以某种方式阻止分配课程？我正在尝试定位的图像当前没有分配给它的类。 Squarespace 为每个元素提供了唯一的 ID，但无法选择这些 ID，因为每次加载页面时它们都会更改。

【问题讨论】：

Squarespace 不会阻止分配类.. 使用父块 ID 来单独定位图像。至于为什么您的代码不起作用..您是将其粘贴到“页眉/页脚注入”字段还是页眉/页脚？
进入标题注入 - 我已经在单个页面和站点范围内尝试过，但没有任何效果。大约一年前，我在 Squarespace 上做过一次，并取得了成功。这似乎是一个新的冲突或问题。至于通过块 ID 定位图像，这在 Squarespace 上是不可能的 - 每次加载页面时块 ID（以“yui-”开头）都会改变。我必须找到一个父类并指定第 n 个孩子。
这听起来像是与一个常见问题有关。请说明您正在使用的模板，并考虑提供指向相关网站/页面的链接。
@Chris Nope，任何以 yui_ 开头的 id 都是动态的，但是 block_yui 或 block- 是稳定的并且非常好用。过去 8 年左右一直在 ss 中使用它们。
我正在使用 Shift 模板。

标签： javascript jquery squarespace

【解决方案1】：

你应该这样做：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
  $("img").addClass("example")
})
</script>

如果你把你的脚本放在头上。

$(function() {}) 将等到文档加载完毕并调用里面的函数。

【讨论】：

谢谢，但这不起作用——我再次在页面源代码中看到了完整的脚本，但对任何 img 元素都没有影响。我尝试使用其他 jquery 命令，如 append，也没有效果。我尝试再次将代码注入页脚没有效果。
我认为问题是您加载 jquery 错误。您应该使用cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js 加载它。当您使用服务器时，您应该只使用 //ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js。

【解决方案2】：

在 Squarespace 中，当您自定义的 Javascript 似乎没有任何效果，或者仅在页面刷新后才起作用时，可能与 Squarespace's AJAX loading 有关：

有时，Ajax 可能会与嵌入的自定义代码或锚点发生冲突链接。 Ajax 还可以干扰站点分析，记录点击仅限第一页。

您可以为您的模板禁用 AJAX。或者，请参阅此处概述的其他方法：https://stackoverflow.com/a/42604055/5338581

请注意，这仅适用于某些模板。如果没有说明您使用的模板，也没有包含指向相关网站/页面的链接，您只能猜测。

【讨论】：