JavaScript: Как получить имя класса дочернего элемента "i", используя делегирование события? - PullRequest
Новая
       37

JavaScript: Как получить имя класса дочернего элемента "i", используя делегирование события?

0 голосов
/ 17 ноября 2018

Я воссоздаю классическую карточную игру памяти для своего финального проекта - колоду карт, которую мне нужно перевернуть и сопоставить.Ниже приведена выдержка из колоды карт в 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
    }
});

Теперь мне нужно получить дочерний элемент карты, по которой щелкнули, добавить ее в массив, а затем использовать этот массив для сопоставления двух открытых карт вместе.Проблема в том, что я не могу понять, как получить класс дочернего элемента (например, i class = "fa fa-diamond").Как я могу продолжить отсюда?

Я думал просто добавить отдельного прослушивателя событий для каждой карты вместо этого, но я предполагаю, что это будет более дорогостоящей операцией.Или это будет лучше?Ждем вашей помощи и предложений.

1 Ответ

0 голосов
/ 17 ноября 2018

Чтобы получить фактический дочерний вызов querySelector() от передачи event.target в селекторе, который будет соответствовать вашему элементу <i>, например, i.fa.Или, если это единственный дочерний элемент этого <li>, просто возьмите первый элемент в children

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

Также вам не нужно добавлять класс (ы) каждого элементак арайю.Сохраните карту, по которой щелкнули, и при нажатии следующей карты просто сравните ее с сохраненной. 

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>
...