如何在 JavaScript / HTML / CSS 中处理带有跨度的关键字框

Question

我正在尝试构建可变数量的关键字框（关键字框的数量由 php 处理）。为了更好地理解，我制作了三个硬编码的 html 关键字框。最终结果应该是多个关键字框，它可以处理多个关键字，并在每个 ENTER 之后在一个单独的内部框中显示它们。如果我点击 BUTTON，所有关键字都应该被提醒。我目前的尝试几乎奏效了。您可以输入关键字，按回车键存储它们。但是再次点击关键字框后，只会显示内部关键字框。如果有人能帮助我解决这个问题，我将不胜感激。:)let tags = [];let tagContainer = document.querySelectorAll('.tag-container');tagContainer.forEach(function(foo) {  foo.addEventListener('click', (e) => {    //console.log(e.target.tagName);    //if (e.target.tagName === 'I') {    var tagLabel = e.target.getAttribute('data-item');    var index = tags.indexOf(tagLabel);    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];    foo.querySelectorAll('.tag').forEach(tag => {      tag.parentElement.removeChild(tag);    });    tags.slice().reverse().forEach(tag => {      var div = document.createElement('div');      div.setAttribute('class', 'tag');      var span = document.createElement('span');      span.innerHTML = tag;      var closeIcon = document.createElement('i');      closeIcon.innerHTML = 'close';      closeIcon.setAttribute('class', 'material-icons');      closeIcon.setAttribute('data-item', tag);      div.appendChild(span);      div.appendChild(closeIcon);      foo.prepend(div);    });    //}  })});let input = document.querySelectorAll('.tag-container input');input.forEach(function(bar) {  bar.addEventListener('keyup', (e) => {    if (e.key === 'Enter') {      e.target.value.split(',').forEach(tag => {        tags.push(tag);      });      bar.querySelectorAll('.tag').forEach(tag => {        tag.parentElement.removeChild(tag);      });      tags.slice().reverse().forEach(tag => {        var div = document.createElement('div');        div.setAttribute('class', 'tag');        var span = document.createElement('span');        span.innerHTML = tag;        var closeIcon = document.createElement('i');      });      bar.value = '';    }    bar.focus();  })});

Answer 1

const tagContainerNodes = document.querySelectorAll(".tag-container");

tagContainerNodes.forEach((tagContainerNode) => {

  const input = tagContainerNode.querySelector("input");

  input.addEventListener("keyup", e => {

    if (e.key === "Enter") {

      createTag(e.target.value, tagContainerNode, input);

      e.target.value = "";

    }

  });

});

function createTag(tagName, parent, before) {

  var div = document.createElement("div");

  div.setAttribute("class", "tag");

  var span = document.createElement("span");

  span.innerHTML = tagName;

  div.appendChild(span);

  parent.insertBefore(div, before)

}

function clicked() {

  const allTagText = [];

  tagContainerNodes.forEach((tagContainerNode) => {

    const tagNodes = tagContainerNode.querySelectorAll(".tag");

    tagNodes.forEach((tagNode) => {

      allTagText.push(tagNode.textContent);

    });

  });

  console.log(allTagText);

}

.tag-container {

  border: 2px solid #ccc;

  padding: 10px;

  border-radius: 5px;

  display: flex;

}

.tag-container .tag {

  padding: 5px;

  border: 1px solid #ccc;

  margin: 5px;

  border-radius: 3px;

  background: #f2f2f2;

  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;

}

.tag-container input {

  font-size: 16px;

  padding: 5px;

  outline: none;

  border: 0;

}

<div class="tag-container">

  <input id="input_search" />

</div>

<button type="button" onclick="clicked()">Button</button>

<div class="tag-container">

  <input id="input_search" />

</div>

<button type="button" onclick="clicked()">Button</button>

<div class="tag-container">

  <input id="input_search" />

</div>

<button type="button" onclick="clicked()">Button</button>