时间戳

首页 > 解决方案 > 如何使用事件传播将两个跨度标签与 Javascript 连接起来？

javascript - 如何使用事件传播将两个跨度标签与 Javascript 连接起来？

问题描述

我有以下代码：

document.querySelector('.test').addEventListener('keyup', function(event) {
    if (event.target.className === "badge alert-info village"){
      const elementsToChange = document.querySelectorAll('.badge alert-info village');
      for (let i = 0; i < elementsToChange.length; i++) {
        const currentElement = elementsToChange[i];
        currentElement.innerText = event.target.innerText;
      }
    }
  });
span.badge[contenteditable] {
    display: inline-block;
}
span.badge[contenteditable]:empty::before {
    content: attr(data-placeholder);
    display: inline-block;
}
span.badge[contenteditable]:empty:focus::before {
    content: attr(data-focused-advice);
}
<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Document</title>
      <link rel="stylesheet" href="./static/style.css">
  </head>
  <body>
    <p class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, beatae!
      <span contenteditable="true" class="badge alert-info name" data-placeholder="Enter your name" data-focused-advice="Start typing"></span><i class="fa fa-lg fa-plus-circle"></i>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis, laboriosam?
      <span contenteditable="true" class="badge alert-info village" data-placeholder="Enter your village" data-focused-advice="Start typing"></span><i class="fa fa-lg fa-plus-circle"></i>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, deleniti.
      <span contenteditable="true" class="badge alert-info name" data-placeholder="Enter your name" data-focused-advice="Start typing"></span><i class="fa fa-lg fa-plus-circle"></i>
      Lorem ipsum dolor sit amet.
      <span contenteditable="true" class="badge alert-info village" data-placeholder="Enter your village" data-focused-advice="Start typing"></span><i class="fa fa-lg fa-plus-circle"></i>
      Lorem ipsum, dolor sit amet consectetur adipisicing.
    </p>
  </body>
</html>

我试图实现的期望行为是，如果用户在任何带有“名称”类的跨度标签上输入她的名字，其他人会自动完成但不是带有“村庄”类的跨度标签，反之亦然。

这对于用户需要在多个位置输入她的姓名的表单很有用。无论她在哪里输入，其他所有内容也会更新。

我认为这个简单的 javascript 函数可以解决问题，但我显然遗漏了一些东西，因为它不起作用。

标签： javascripthtmlcss

解决方案

你真的很亲近！首先 - 将类选择器更改const elementsToChange = document.querySelectorAll('.badge alert-info village');为 .badge.alert-info.village. 这样就可以找到了。其次，稍微调整一下，当您遍历需要更改的元素时，您需要排除当前正在编辑的元素。如果你不这样做，你会得到一些有趣的结果=）我没有做这name部分，因为除了类名之外它应该与村庄相同。

let item = document.querySelector('.test');

 item.addEventListener('keyup', function(event) {
    if (event.target.className === "badge alert-info village"){
      const elementsToChange = document.querySelectorAll('.badge.alert-info.village');
      for (let i = 0; i < elementsToChange.length; i++) {
        const currentElement = elementsToChange[i];
        if(currentElement != document.activeElement){ //excluding current element
            currentElement.innerText = event.target.innerText;
        }
      }
    }
  });

推荐阅读