主页 / 问题 / 1285692
Accepted
Monkey Mutant
Asked:2022-05-24 22:55:45 +0000 UTC2022-05-24 22:55:45 +0000 UTC

如何检查类的存在？

  • 772

如何检查只有一个类进入 event.target 并且忽略其他所有内容，即返回 false ？

单击选择项目时，文本被复制到项目中，但是当我写检查时，它停止工作

这是我的尝试

let item = document.querySelector(".item");
let select = document.querySelector(".select");

select.addEventListener("click", function(e) {
  e = event.target;
  if (!e.target.classList.contains == ".select-item") return;
  item.innerHTML = e.innerHTML;
})
.item,
.select-item {
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
}

.select {
  margin-top: 50px;
}

.select-item {
  margin-top: 4px;
}
<div class="item">
  Выберите пункт
</div>
<div class="select">
  <div class="select-item">
    Бублик
  </div>
  <div class="select-item">
    Пончик
  </div>
  <div class="select-item">
    Пышка
  </div>
  <div class="select-item">
    Булочка
  </div>
</div>

javascript

2 个回答

  1. 逻辑不清楚的东西，为什么我们需要挂断点击选择。当单击任何具有 .select-item 类的元素时 - 插入文本：

    let item = document.querySelector(".item");
let select = document.querySelectorAll(".select-item");

select.forEach(element=>{

  element.addEventListener("click", function(e) {
    item.innerHTML = element.innerHTML;
  })
  
})
    .item,
.select-item {
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
}

.select {
  margin-top: 50px;
}

.select-item {
  margin-top: 4px;
}
    <div class="item">
  Выберите пункт
</div>
<div class="select">
  <div class="select-item">
    Бублик
  </div>
  <div class="select-item">
    Пончик
  </div>
  <div class="select-item">
    Пышка
  </div>
  <div class="select-item">
    Булочка
  </div>
</div>

    • 1
  2. Best Answer

    .classList.contains 是一种方法，因此必须以不同的方式调用它。然而，您两次获取目标属性

    let item = document.querySelector(".item");
let select = document.querySelector(".select");

select.addEventListener("click", function(e) {
  e = e.target;
  if (!e.classList.contains("select-item")) return;
  item.innerHTML = e.innerHTML;
})
    .item,
.select-item {
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
}

.select {
  margin-top: 50px;
}

.select-item {
  margin-top: 4px;
}
    <div class="item">
  Выберите пункт
</div>
<div class="select">
  <div>
    Бублик
  </div>
  <div class="select-item">
    Пончик
  </div>
  <div class="select-item">
    Пышка
  </div>
  <div class="select-item">
    Булочка
  </div>
</div>

    • 1

相关问题