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

Question

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

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

我想知道一种无需太多代码即可在许多跨度中复制相同文本的方法。如何？

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选择同一 css 选择器的所有元素。请使用以下代码：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>