JavaScript：如何使用事件委托获取子元素 "i" 类名？

Question

我正在为我的最终项目重新创建一个 classic 卡记忆游戏 - 我需要翻转和匹配的一副纸牌。 HTML 中的一副牌摘录如下：

<ul class="deck">
    <li class="card">
        <i class="fa fa-diamond"></i>
    </li>
    <li class="card">
        <i class="fa fa-paper-plane-o"></i>
    </li>
    <li class="card">
        <i class="fa fa-diamond"></i>
    </li>
    <li class="card">
        <i class="fa fa-paper-plane-o"></i>
    </li>
</ul>

我已经通过将事件委托应用到父节点并使用 event.target 属性.

添加了翻转功能

document.querySelector('.deck').addEventListener('click', function(event) {
    if (event.target.nodeName === 'LI') {
        event.target.classList.add('open');
        //get child element "i" classname, add to array and match cards
    }
});

现在我需要获取被点击的卡片的子项，将其添加到数组中，然后使用该数组将两张打开的卡片匹配在一起。问题是，我似乎无法弄清楚如何获取子元素的 class（例如 i class="fa fa-diamond"）。我该如何从这里开始？

我考虑过只为每张卡片添加一个单独的事件侦听器，但我想这将是一个成本更高的操作。或者这会更好吗？期待您的帮助和建议。

Answer 1

获取实际的子调用querySelector() from the event.target passing in a selector that will match your <i> element, eg i.fa. Or if it is the only child element of that <li> just grab the first element in children

var child = event.target.querySelector("i.fa");
//or
var child = event.target.children[0];

此外，您不需要将每个元素的 class(es) 添加到数组中。保存点击的卡片，当点击下一张卡片时，只需将其与保存的卡片进行比较。

savedI.className == child.className

演示

var openCard = null;

document.querySelector('.deck').addEventListener('click', function(event) {
  //check that we havent clicked on the <li> or child <i>
  if (event.target.nodeName !== "LI" && event.target.nodeName !== "I") {
    return;
  }
  var child = null;
  
  if (event.target.nodeName == "LI") {
    //if we clicked on the li, child is target.children[0]
    child = event.target.children[0];
  } else {
    //if we clicked on the i directly, child is just the event target
    child = event.target;
  }

  child.parentElement.classList.add('open');

  if (openCard && openCard.className == child.className) {
    openCard.classList.add("match");
    child.classList.add("match");
    openCard = null;
    console.log("match");
  } else if (openCard) {
    openCard.parentElement.classList.remove("open");
    child.parentElement.classList.remove("open");
    openCard = null;
    console.log("No match");
  } else {
    openCard = child;
  }
});

i {
  height: 32px;
  width: 32px;
  display: block;
}

.open {
  outline: 1px solid #F00;
}

li i.match {
  background: #0F0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
</ul>

JavaScript：如何使用事件委托获取子元素 "i" 类名？

JavaScript: How to get child element "i" classname using alongside event delegation?

javascript

event-delegation