将JS函数单独应用于多个元素

Question

我没有完全理解'这个'，我已经检查了another answer同样的问题，但由于基本代码完全不同，我发现我迷路了。我无法弄清楚我应该绑定什么，而其他一些答案根本没有使用'this'或绑定。

我正在尝试做一些非常简单的事情，单击时在单个元素中添加和删除一个类，但我想将它应用于多个元素，每次只触发一次。

我想在JS中理解并执行此操作，而不是jQuery。这将是一个简单的捷径，但让我感到困惑。

const flipCard = document.querySelectorAll(".card--holder");
const card = document.getElementById("card");

flipCard.forEach(card => {
  card.addEventListener("click", flipCards);
})

const flipCards = () => {
  if (card.classList.contains("flipped")) {
    this.classList.remove("flipped");
  } else {
    this.classList.add("flipped");
  }
}

.flip {
  -webkit-perspective: 800;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotateY(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  text-align: center;
  line-height: 200px;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  cursor: pointer;
}

.flip .card .back {
  -webkit-transform: rotateY(180deg);
  background: blue;
  color: black;
  cursor: pointer;
}

<div class="card--holder flip">
    <div class="card" id="card">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>


<div class="card--holder flip">
    <div class="card" id="card">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>

<div class="card--holder flip">
    <div class="card" id="card">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>

Answer 1

有些观点：

• 您需要在使用之前定义flipCards常量。

• ids必须在HTML

中是唯一的 箭头函数中的

• this不正确，您需要使用第一个函数参数和target属性来获取单击目标元素。由于您希望选择父级，因此您需要使用closest来获取此内容，因为click目标位于元素内部，在您的示例中。

＆＃13;

＆＃13;

const flipCards = event => {
  var parent = event.target.closest(".card--holder");

  if (parent.classList.contains("flipped")) {
    parent.classList.remove("flipped");
  } else {
    parent.classList.add("flipped");
  }
}

const flipCard = document.querySelectorAll(".card--holder");
const card = document.getElementById("card");

flipCard.forEach(card => {
  card.addEventListener("click", flipCards);
})

＆＃13;

.flip {
  -webkit-perspective: 800;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotateY(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  text-align: center;
  line-height: 200px;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  cursor: pointer;
}

.flip .card .back {
  -webkit-transform: rotateY(180deg);
  background: blue;
  color: black;
  cursor: pointer;
}

.flipped .card .front {
  background: red !important;
}

＆＃13;

<div class="card--holder flip">
    <div class="card" id="card1">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>

<div class="card--holder flip">
    <div class="card" id="card2">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>

<div class="card--holder flip">
    <div class="card" id="card3">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;