停止使用 getElementById 和 target by class 在输入框更改时更新文本内容

Question

我正在尝试将我的代码片段更新为：

1 - 如果输入有值，则在事件侦听器更新 span 标签之前将值输出到 span.Permalink

2 - 通过 class 而不是 ID 来定位跨度。我不得不添加不止一个 span 标签，所以我不能再使用 ID

如果 span 标签有 ID，我可以使用代码片段，但现在我需要输入值来更新所有带有 class of .Permalink 的 span 标签。

我尝试了 getElementsByClassName、getElementByClassName 和 $(.span.Permalink 以及其他一些方法。

window.onload = function() {
  const nameField = document.querySelector('[name="accsc_settings[accsc_get_started_home_page_title]"]');
  nameField.addEventListener('input', function() {
    document.getElementById('Permalink').textContent = this.value.toLowerCase().replace(/ /g, "-");
  })  
};

<div class="home_page_title">
  <input id="nameField" type="text" name="accsc_settings[accsc_get_started_home_page_title]" value="West Coast" data-depend-id="accsc_home_page_title">
</div>

<div>/<span class="Permalink"></span>/about-us/</div>
<div>/<span class="Permalink"></span>/contact/</div>
<div>/<span id="Permalink"></span>/products/</div>

Answer 1

document.getElementsByClassName 对我来说工作正常。我刚刚添加了 Array.from 以将 HTMLCollection 转换为数组，因此我可以使用 Array.forEach 来迭代集合。

window.onload = function() {
      const nameField = document.querySelector('[name="accsc_settings[accsc_get_started_home_page_title]"]');
      nameField.addEventListener('input', function() {
        const nameFieldVal = this.value;
        //Using Array.from to convert HTMLCollection to Array
        //Array.forEach to iterate each span
        //set the textContent property of each span with className "Permalink"
        Array.from(document.getElementsByClassName('Permalink')).forEach((el) => el.textContent = nameFieldVal.toLowerCase().replace(/ /g, "-"));
      })  
    };

    <div class="home_page_title">
      <input id="nameField" type="text" name="accsc_settings[accsc_get_started_home_page_title]" value="West Coast" data-depend-id="accsc_home_page_title">
    </div>

    <div>/<span class="Permalink"></span>/about-us/</div>
    <div>/<span class="Permalink"></span>/contact/</div>
    <div>/<span class="Permalink"></span>/products/</div>

停止使用 getElementById 和 target by class 在输入框更改时更新文本内容

Stop using getElementById and target by class to update text content upon input box change

jquery

youtube-api