append 外部數據輸入標簽

Question

1：-我正在嘗試創建標簽輸入，就好像我們在tags-container輸入任何內容一樣，新標簽將被推送到標簽，
2：- 如果我們點擊標簽（來自unique-product-tag列表）那些應該被添加到同一個標簽容器中，所以我們可以輸入一個新標簽，或者從列表中添加，

<div class="tag-container">
  <input>
</div>

<span class="unique-product-tag">
  <button class="get-tag-data">Tag1</button>
  <button class="get-tag-data">Tag2</button>
  <button class="get-tag-data">Tag3</button>
  <button class="get-tag-data">Tag3</button>
  <button class="get-tag-data">Tag4</button>
  <button class="get-tag-data">Tag5</button>
  <button class="get-tag-data">Tag6</button>
  <button class="get-tag-data">Tag7</button>
</span>

CSS

.tag-container{
  border:1px solid rgb(85, 82, 82);
  padding: 10px;
  border-radius: 6px;
  display: flex;
  flex-wrap:wrap;
}
.unique-product-tag {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 22px;
}
.tag, .unique-product-tag button{
  background: rgb(240, 238, 238);
  border:1px solid  rgb(240, 238, 238);;
  padding: 5px;
  margin: 3px 6px;
  border-radius: 3px;
  display:flex;
}
.tag-container input{
  border:none;
  outline:none;
}

Javascript

const tagContainer = document.querySelector('.tag-container');
  const input = document.querySelector('.tag-container input');

  let tags = [];

  function createTag(label){
    const div = document.createElement('div');
    div.setAttribute('class', 'tag');
    const span = document.createElement('span');
    span.innerHTML = label;
    const closeBtn = document.createElement('i');
    closeBtn.setAttribute('class', 'close-tag');
    closeBtn.setAttribute('data-item', label);
    closeBtn.innerHTML = '×';

    div.appendChild(span);
    div.appendChild(closeBtn);
    return div;
  }

function reset(){
  document.querySelectorAll('.tag').forEach(function(tag){
    tag.parentElement.removeChild(tag);
  })
}
function addTags(){
  reset();
  tags.slice().reverse().forEach(function(tag){
    const input = createTag(tag);
    tagContainer.prepend(input);
  })
}

input.addEventListener('keyup', function(e){
  if(e.key === 'Enter'){
    tags.push(input.value);
    addTags();
    input.value='';
  }
});

document.addEventListener('click', function(e){
  if(e.target.tagName == 'I'){
    const value = e.target.getAttribute('data-item');
    console.log(value, 'dhbdbd');
    const index = tags.indexOf(value);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    addTags();

  }
})

到目前為止，我的代碼按預期工作，但我正在尋找更正以下代碼

    let tagel = document.querySelectorAll('.get-tag-data');
            for(let i = 0; i < tagel.length; i++){
                tagel[i].addEventListener('click', function(event){
                    let data = event.target.innerHTML;
                    tags.push(data);
                    console.log(data);
                });         
        }

Answer 1

我不清楚您要在哪里添加標簽，但是：

• 如果要輸入，那么您可以使用input.value = tags;
• 如果到div.tag-container那么你可以使用tagContainer.innerHTML += data; 以 append 的數據（或不帶+來替換內容）。 它可以是您希望包裝數據的任何 HTML。

Answer 2

Javascript,

const tagContainer = document.querySelector('.tag-container');
const input = document.querySelector('.tag-container input');

let tags = [];

function createTag(label){
  // const tagList = document.querySelectorAll('.get-tag-data')
  const div = document.createElement('div');
  div.setAttribute('class', 'tag');
  const span = document.createElement('span');
  span.innerHTML = label;
  const closeBtn = document.createElement('i');
  closeBtn.setAttribute('class', 'close-tag');
  closeBtn.setAttribute('data-item', label);
  closeBtn.innerHTML = '×';

  div.appendChild(span);
  div.appendChild(closeBtn);
  return div;
}

function reset(){
  document.querySelectorAll('.tag').forEach(function(tag){
    tag.parentElement.removeChild(tag);
  });
}

function addTags(){
  reset();
  tags.slice().reverse().forEach(function(tag){
    const input = createTag(tag);
    tagContainer.prepend(input);
  })
}

document.querySelectorAll('.get-tag-data').forEach(function(tag){
  tag.addEventListener('click', function(eve){
    let val = eve.target.innerHTML;
    console.log(val);
    tags.push(val);
    addTags();
    // val = '';
    return tag;
  });
})

input.addEventListener('keyup', function(e){
  if(e.key === 'Enter'){
    tags.push(input.value);
    addTags();
    input.value='';
  }
});

document.addEventListener('click', function(e){
  if(e.target.tagName == 'I'){
    const value = e.target.getAttribute('data-item');
    const index = tags.indexOf(value);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    addTags();
  }
})