1

我使用 CMS Webflow（网站构建器的 CMS 功能）来构建重复自身的 HTML 元素。Webflow 会自动复制这些内容。不幸的是，它还复制了元素本身和所有嵌套元素的 ID，使它们不唯一。由于种种原因，我不得不使用这个功能。

现在我使用一个嵌入式脚本用另一个（也是标题）的 innerText 覆盖特定嵌套 HTML 元素（标题）的 ID。这两个元素都位于自动复制的提到的元素内。

第二个标题文本（我要抓取其文本的参考标题）由 CMS 功能自动填充，因此是唯一的。

但是，当我将第一个标题的新 ID 记录到控制台（被第二个标题的 innerText 覆盖）时，它只是空的。在下面的代码中，我添加了带有替代代码行的注释（// 或者：），这使代码工作，但不是如所愿。

<script>
    $(document).ready(function(event) { 

    let elementToBeChanged = $(event.target).next("#changeMyId");
    let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId");
    // alternatively: let elementWithReferenceText = $(this).find("#useMeToChangeId");

    let newId = elementWithReferenceText.text();
    // alternatively: let newId = Math.floor(Math.random()*6) // to verify that generating a unique ID each time the element gets duplicated is possible (it is)

    console.log(newId) // to compare with console.log(elementToBeChanged.id) if ID was changed correctly
    elementToBeChanged.id = newId;
    console.log(elementToBeChanged.id); // to check if ID was changed 
});
</script>

我认为代码的问题在于没有选择正确的第二个标题。奇怪的是，这个 jQuery 选择器可以工作：

let elementWithReferenceText = $(this).find("#useMeToChangeId");

但显然每次都会用相同的值覆盖 ID，因为它不是相对路径。

不幸的是，相对路径不起作用，console.log(newId) 日志只是空到控制台（我认为这一行是问题）：

let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId");

我使用以下内容来验证每次元素重复时生成唯一 ID 是可能的（它是）

let newId = Math.floor(Math.random()*6)

HTML结构：

我究竟做错了什么？

4

3 回答 3

2

let elementWithReferenceText = $(this).find("#useMeToChangeId");

这只是找到了 id为 useMeToChangeId in的元素$(this)，其中 in$(document).ready()是（我假设）文档。这使得它几乎与调用$('#useMeToChangeId');. 当然，如果页面上存在具有该 ID 的元素，这将起作用。

你可以检查是否let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId");真的做了什么。可能 的父级$(event.target)后面没有 ID 为“useMeToChangeId”的元素。您是否检查过是否elementWithReferenceText包含值？例如

console.log(elementWithReferenceText);

在你定义之后elementWithReferenceText？

于 2019-01-09T13:54:03.217 回答
1

我建议您使用 ID 查询所有元素并根据需要更改它们。您的脚本标签必须在所有重复的元素之后

Array.from(document.querySelectorAll("#duplicate"))
  .forEach((el, index) => {
    if (index > 0) {
      el.id = el.id + "-" + index;
    }
  });

Array.from(document.querySelectorAll("p"))
  .forEach((el, i) => {
    console.log(`Element index ${i}, id: ${el.id}`)
  });
<p id="duplicate">

</p>

<p id="duplicate">

</p>

<p id="duplicate">

</p>

于 2019-01-09T14:10:29.567 回答
1

您可以在自定义 HTML 嵌入块中使用 Webflow CMS 数据设置元素的 ID。

在集合项中，添加一个嵌入，然后“+ 添加字段”按钮将允许您在代码中使用您的 CMS 数据。

Webflow嵌入图像：
webflow嵌入图像

于 2019-05-09T15:56:26.640 回答