Событие происходит, если клик или наведение происходит над карточкой (class="cards).
<div onmouseover="animationCard(event); return false;" onclick="animationCard(event); return false;" class="cards card_delivery">
<input type="checkbox" id="main_delivery">
<label for="main_delivery">
<img class="car card_img" src="image/delivery.png" alt="Бесплатная доставка">
</label>
<h2>lkerfvevrek</h2>
<p>/p>
<p></p>
</div>
<div onmouseover="animationCard(event); return false;" onclick="animationCard(event); return false;" class="cards card_tools">
<input type="checkbox" id="main_tools">
<label for="main_tools">
<img class="tool card_img" src="image/tools.png" alt="Техническое обслуживание">
</label>
<h2>Техническая поддержка</h2>
<p>Гарантия 1 год</p>
<p></p>
</div>
Вот как это карявенько реализовано:
function animationCard(event){ if (busy){return;}
var cards = document.body.getElementsByClassName('cards');
var img = document.body.getElementsByClassName('card_img');
currentCount++;
alert(this.tagName);
for (var i = 0; i < img.length; i++){
if (img[i] == event.target || cards[i] == event.target || cards[i].children[1] == event.target || event.target == cards[i].children[2] || event.target == cards[i].children[3] || event.target == cards[i].children[4]){
img[i].style.animationPlayState = 'running';
busy = true;
setTimeout(function(){
busy = false;
}, 100)
setTimeout(function(){
img[i].style.animationPlayState = '';
img[i].style.animationIterationCount = currentCount;
}, 1000);
break;
}
}
}
У меня ВОПРОС. Как мне избавится от проверки в цикле, типа:
if (img[i] == event.target || cards[i] == event.target ||
cards[i].children[1] == event.target || event.target == cards[i].children[2]
|| event.target == cards[i].children[3] || event.target ==
cards[i].children[4])
И вместо всего этого я хочу проверять :
(cards[i].className == this.className)
Но this.className возвращает undefined. Почему?