Question

我做了这段代码，所以我可以镜像文本区域：

<body>
<textarea class="caixa1"></textarea>
<textarea class="caixa2"></textarea>
    <br>
<textarea class="caixa1"></textarea>
<textarea class="caixa2"></textarea>

<script>
    var a = document.getElementsByClassName("caixa1");
    var b = document.getElementsByClassName("caixa2");
    a[0].oninput = function(e) {
      b[0].value = a[0].value;
    }
          b[0].oninput = function(e) {
      a[0].value = b[0].value;
    }
             a[1].oninput = function(e) {
      b[1].value = a[1].value;
    }
          b[1].oninput = function(e) {
      a[1].value = b[1].value;
    }       
</script>
</body>

但是我需要重复八次。有什么办法可以创建一个根据当前textarea的类索引更改的变量？

Answer 1

遍历其中一个集合的每个索引，并在另一个集合上访问相同的索引：

var a = document.getElementsByClassName("caixa1");
var b = document.getElementsByClassName("caixa2");
for (let i = 0; i < a.length; i++) {
  const t1 = a[i];
  const t2 = b[i];
  t1.oninput = () => t2.value = t1.value;
  t2.oninput = () => t1.value = t2.value;
}

<textarea class="caixa1"></textarea>
<textarea class="caixa2"></textarea>
<br>
<textarea class="caixa1"></textarea>
<textarea class="caixa2"></textarea>

一种替代方法是在容器上使用事件委派，并从事件目标文本区域中动态识别哪个链接的相邻文本区域将值分配给（下一个或上一个同级）：

document.body.addEventListener('input', ({ target }) => {
  const other = target[target.matches('.caixa1') ? 'nextElementSibling' : 'previousElementSibling'];
  other.value = target.value;
});

<textarea class="caixa1"></textarea>
<textarea class="caixa2"></textarea>
    <br>
<textarea class="caixa1"></textarea>
<textarea class="caixa2"></textarea>

有没有一种方法可以根据类索引更改变量？

1 个答案: