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

【问题标题】：How to replicate text on many spans如何在多个跨度上复制文本
【发布时间】：2020-03-15 18:27:07
【问题描述】：

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

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

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

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>

【问题讨论】：

标签： javascript html innerhtml

【解决方案1】：

使用querySelectorAll 选择同一个css 选择器的所有元素。请使用以下代码：

请使用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>

【讨论】：