Как убрать дубли с массива которые выведены на страницу?

Рейтинг: 0Ответов: 1Опубликовано: 26.03.2023

Увидел интересный вопрос для себя и решил попробывать реализовать (для себя) всё получилось за исключением одного ньюанса...

При клике в поле .items блоки выпадают с анимацией и так же когда курсор увожу пропадают и тоже с анимацией НО если тыкнуть опять в этоже поле то старые блоки плюсуются и получается билибирда ...

Наглядно:

let mass = [{
  user: "Алексей Викторович",
  percent: "63% побед"
}, {
  user: "Игорь Ануфриевич",
  percent: "54% побед"
}, {
  user: "Головач Лена",
  percent: "72% побед"
}, ];

let occum = "";

document.querySelector(".items").addEventListener("click", addTimeout);

function addTimeout() {
  addItem();

  setTimeout(function() {
    document.querySelectorAll(".user").forEach(function(block) {
      block.classList.add("active")
    })
  }, 1000)

}

function addItem() {
  mass.forEach(function(el) {
    occum += `
    <div class="user">
      <p class="user_name">${el.user}</p>
      <p class="user_ratio">${el.percent}</p>
    </div>`
  })
  document.querySelector(".items").insertAdjacentHTML("afterend", occum);
}



document.querySelector(".items").addEventListener("mouseout", removeItem)

function removeItem() {
  setTimeout(function() {
    document.querySelectorAll(".user").forEach(function(block) {
      block.classList.remove("active")
    })
  }, 1000)
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.items {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border: 1px solid #000;
  border-radius: 10px;
  background: transparent;
  width: 90%;
  margin: auto;
}

.items_header p {
  font-weight: 900;
  font-family: sans;
}

.items_icon {
  cursor: pointer;
}

.outer {
  position: absolute;
  top: 100%;
  left: 0;
  max-width: 100%;
}

.user {
  opacity: 0;
  height: 1px;
  transition: 0.2s linear;
  overflow: hidden;
}

.user_name {
  font-family: sans;
  font-weight: 800;
}

.user_ratio {
  font-family: sans;
  font-weight: 500;
}

.user.active {
  border: 1px solid;
  border-radius: 10px;
  height: 60px;
  padding: 10px 20px;
  opacity: 1;
}
<div class="items">
  <div class="items_header">
    <p>Игроки</p>
  </div>
  <div class="items_icon">
    <svg viewBox="0 0 20 10" width="20">
       <path d="M0,0 10,10 20,0" fill="transparent" stroke="#000" stroke-width="3"/>
    </svg>
  </div>

  <div class="outer"></div>
</div>

Как решить эту неприятность ?

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Если я правильно понял задачу, то нужно было просто вызывать addItem() один раз а не каждый раз при клике.

addItem(); // тут добавляем

function addTimeout() {
  // addItem(); тут убираем
  setTimeout(function() {
    document.querySelectorAll(".user").forEach(function(block) {
      block.classList.add("active")
    })
  }, 1000)
}


let mass = [{
  user: "Алексей Викторович",
  percent: "63% побед"
}, {
  user: "Игорь Ануфриевич",
  percent: "54% побед"
}, {
  user: "Головач Лена",
  percent: "72% побед"
}, ];

let occum = "";

document.querySelector(".items").addEventListener("click", addTimeout);

addItem(); // +

function addTimeout() {
  
  // addItem();

  setTimeout(function() {
    document.querySelectorAll(".user").forEach(function(block) {
      block.classList.add("active")
    })
  }, 1000)

}

function addItem() {
  mass.forEach(function(el) {
    occum += `
    <div class="user">
      <p class="user_name">${el.user}</p>
      <p class="user_ratio">${el.percent}</p>
    </div>`
  })
  document.querySelector(".items").insertAdjacentHTML("afterend", occum);
}



document.querySelector(".items").addEventListener("mouseout", removeItem)

function removeItem() {
  setTimeout(function() {
    document.querySelectorAll(".user").forEach(function(block) {
      block.classList.remove("active")
    })
  }, 1000)
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.items {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border: 1px solid #000;
  border-radius: 10px;
  background: transparent;
  width: 90%;
  margin: auto;
}

.items_header p {
  font-weight: 900;
  font-family: sans;
}

.items_icon {
  cursor: pointer;
}

.outer {
  position: absolute;
  top: 100%;
  left: 0;
  max-width: 100%;
}

.user {
  opacity: 0;
  height: 1px;
  transition: 0.2s linear;
  overflow: hidden;
}

.user_name {
  font-family: sans;
  font-weight: 800;
}

.user_ratio {
  font-family: sans;
  font-weight: 500;
}

.user.active {
  border: 1px solid;
  border-radius: 10px;
  height: 60px;
  padding: 10px 20px;
  opacity: 1;
}
<div class="items">
  <div class="items_header">
    <p>Игроки</p>
  </div>
  <div class="items_icon">
    <svg viewBox="0 0 20 10" width="20">
       <path d="M0,0 10,10 20,0" fill="transparent" stroke="#000" stroke-width="3"/>
    </svg>
  </div>

  <div class="outer"></div>
</div>