如何在 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) => {&nbsp; const input = tagContainerNode.querySelector("input");&nbsp; input.addEventListener("keyup", e => {&nbsp; &nbsp; if (e.key === "Enter") {&nbsp; &nbsp; &nbsp; createTag(e.target.value, tagContainerNode, input);&nbsp; &nbsp; &nbsp; e.target.value = "";&nbsp; &nbsp; }&nbsp; });});function createTag(tagName, parent, before) {&nbsp; var div = document.createElement("div");&nbsp; div.setAttribute("class", "tag");&nbsp; var span = document.createElement("span");&nbsp; span.innerHTML = tagName;&nbsp; div.appendChild(span);&nbsp; parent.insertBefore(div, before)}function clicked() {&nbsp; const allTagText = [];&nbsp; tagContainerNodes.forEach((tagContainerNode) => {&nbsp; &nbsp; const tagNodes = tagContainerNode.querySelectorAll(".tag");&nbsp; &nbsp; tagNodes.forEach((tagNode) => {&nbsp; &nbsp; &nbsp; allTagText.push(tagNode.textContent);&nbsp; &nbsp; });&nbsp; });&nbsp; console.log(allTagText);}.tag-container {&nbsp; border: 2px solid #ccc;&nbsp; padding: 10px;&nbsp; border-radius: 5px;&nbsp; display: flex;}.tag-container .tag {&nbsp; padding: 5px;&nbsp; border: 1px solid #ccc;&nbsp; margin: 5px;&nbsp; border-radius: 3px;&nbsp; background: #f2f2f2;&nbsp; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;}.tag-container input {&nbsp; font-size: 16px;&nbsp; padding: 5px;&nbsp; outline: none;&nbsp; border: 0;}<div class="tag-container">&nbsp; <input id="input_search" /></div><button type="button" onclick="clicked()">Button</button><div class="tag-container">&nbsp; <input id="input_search" /></div><button type="button" onclick="clicked()">Button</button><div class="tag-container">&nbsp; <input id="input_search" /></div><button type="button" onclick="clicked()">Button</button>