如何在多个跨度上复制文本

Question

您在输入框中键入的内容应在每个跨度下方复制。

我可以使用下面的 de js 代码来完成此操作，但为此我需要为每个需要完成的跨度一遍又一遍地编写相同的代码。我尝试在每个跨度上使用相同的 class "one"，但只适用于第一个跨度。我必须为每个跨度创建一个新的 class，并为每个跨度创建一些代码。

我想知道一种无需太多代码即可在许多范围内复制相同文本的方法。怎么样？

var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelector('span.one');
        result.innerHTML = this.value;
    });
    
    var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelector('span.two');
        result.innerHTML = this.value;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="A">
<p>One: <span class="one"></span></p>
<p>Two: <span class="two"></span></p>

Answer 1

使用querySelectorAll到select相同css的所有元素select或。请使用以下代码：

请使用this link to study more about querySelectorAll

var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelectorAll('span');
        for(const res of result) {
          res.innerHTML = this.value;
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="A">
<p>One: <span class="one"></span></p>
<p>Two: <span class="two"></span></p>

如何在多个跨度上复制文本

How to replicate text on many spans

html

javascript

innerhtml