用另一个文本覆盖一个 HTML 元素的 ID

Question

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

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

第二个标题文本（我要抓取其文本的参考标题）由 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>

我认为代码的问题在于 select 没有正确的第二个标题。奇怪的是 jQuery select 或者它有效：

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

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

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

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

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

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

我做错了什么？

Answer 1

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

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

你可以检查let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId");是否真的做了一些事情。也许 $(event.target) 的父元素后面没有 ID 为 "useMeToChangeId" 的元素。您检查过 elementWithReferenceText 是否包含一个值吗？例如

console.log(elementWithReferenceText);

定义 elementWithReferenceText 之后?

Answer 2

我建议您查询所有具有 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>

Answer 3

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

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

Webflow 嵌入图像：

用另一个文本覆盖一个 HTML 元素的 ID

Overwriting the ID of one HTML element with the text of another

javascript

jquery

webflow