Я хочу перевернуть карты в браузере. Элементы отображаются с помощью шаблона Django для цикла. Я могу перевернуть первую карту, но не остальные. Я хочу, чтобы они переворачивались индивидуально.
Вот HTML:
{% for element in elements %}
<div class = "outer">
<div class = "inner">
<div class = "card-back">
<span>{{ content }}</span>
</div>
<div class = "card-front">
<span>{{ content }}</span>
</div>
</div>
</div>
{% endear %}
Вот javascript:
# works for the first element
var card = document.querySelector('.inner');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
# this function seems to break things
function() {
var cards = document.querySelectorAll(".inner");
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards[i];
clickListener(card);
}
});
🤔 А знаете ли вы, что...
С помощью JavaScript можно создавать клиентские приложения для мобильных устройств с использованием фреймворков, таких как React Native и NativeScript.
Согласно Документация Mozilla, document.querySelector() возвращает объект Element, представляющий первый элемент, который соответствует указанному набору селекторов CSS, или null, если совпадений нет.
Поэтому он работает только для первого элемента.
Если вы хотите применить это ко всем элементам, вы можете использовать jQuery и зарегистрировать событие, когда страница полностью загружена.
<head>
<script src = "https://code.jquery.com/jquery-3.3.1.js">
<script>
$(document).ready(function()
{
$(".inner").on('click', function(event)
{
var card = event.target;
card.classList.toggle('is-flipped');
});
});
</script>
</head>
ВАЖНЫЙ: вам не нужна функция с циклом for, так как jQuery автоматически применяет событие щелчка всякий раз, когда добавляется новый элемент.