在 Javascript 中替换 CMS 中的多个字符串

Question

此代码当前从 CMS 获取 'dynamic words' 并将其更改为 span 的代码，当您单击它们时，它会在其上获得一个事件侦听器，会发生一些事情。但目前它只从 CMS 获取最后一个 'dynamic word'，而不是所有的。我正在考虑将其放入循环中，但我认为这行不通。

有人知道问题出在哪里吗？

代码沙箱：

https://codesandbox.io/s/musing-wozniak-zzwps2?file=/src/App.js

Answer 1

如果你能提供一个能执行你的问题的最小复制就更好了（我建议使用 CodeSandbox），但我想问题的关键部分是 const el = document.getElementById('textblock'); 并且 id 不是唯一的，所以在你的代码完成运行之后，功能会在你的动态词的每个循环中起作用，但是它们会覆盖它们在 id 的唯一一个元素上的结果是 'textblock'，所以你只能看到最后一个结果.

nit: 如果完全重写 ArticleBodyText 中的代码将得到维护和阅读，它现在处于非常可变的风格（查询 DOM 并直接改变 innerHTML )

Answer 2

好的，我看到了你的 CodeSandbox 复制品，你应该在每个循环中查询 DOM 元素，而不是在循环运行.

之上查询一次

useEffect(() => {
  // remove these lines
  // const el = document.querySelector(".textblock");
  // const text = el.innerHTML;
  dynamic_words.map((word) => {
    // and replace lines above into the loop
    const el = document.querySelector(".textblock");
    const text = el.innerHTML;
    
    // ...
  })
})

对于事件侦听器，您应该将条件 this.innerHTML.includes(dynamic_word) 编辑为 this.innerHTML.includes(dynamic_words[i])

在 Javascript 中替换 CMS 中的多个字符串

Replace multiple strings from CMS in Javascript

javascript

replace