Я создаю css перелистываемые карточки для проектов, используя теги шаблона Django для итерации карточек. Все кнопки перелистывают только первую карточку.

Как сказано в заголовке. Я хорошо знаю Django, но все еще пытаюсь понять, как использовать JS для таких вещей. Я итерирую карточки с помощью {% for project in projects %}, и все отображается как надо. И когда я нажимаю кнопку на первой карточке, она отлично переворачивается. Однако, когда я нажимаю на кнопку любой другой карты, они также переворачивают и первую карту, вместо того, чтобы перевернуть следующую карту самостоятельно. Я думаю, что это как-то связано с id div'ов или меток, и я попробовал несколько способов, но так и не разобрался.

Вот необходимый HTML:

 <div class="wrapper">
                    {% for project in projects %}
                        <div class="card">
                            <input type="checkbox" id="card1" class="more" aria-hidden="true">
                            <div class="content">
                                <div class="front"
                                     style="background-image: url({{ project.image }})">
                                    <div class="inner">
                                        <h2>{{ project.title}}</h2>

                                        <label for="card1" class="button" aria-hidden="true">
                                            Details
                                        </label>
                                    </div>
                                </div>
                                <div class="back">
                                    <div class="inner">
                                        <div class="info">

                                        </div>
                                        <div class="description">
                                            <p>{{ project.description }}</p>

                                        </div>
                                        <div class="location">Warsaw, Poland</div>
                                        <div class="price">38€ / day</div>
                                        <label for="card1" class="button return" aria-hidden="true">
                                            <i class="fas fa-arrow-left"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

CSS, относящийся к картам:

И javascript (в какой-то момент у меня был другой скрипт jquery, но это то, что у меня есть сейчас:

        (function () {
            var tab = document.querySelector('.card');

            document.getElementById('card1').addEventListener('click', function () {
                tab.classList.add('back');
            }, false);

            document.getElementById('card1').addEventListener('click', function () {
                tab.classList.remove('front');
            }, false);

        })();
    </script>

Я не уверен, что что-то еще может быть полезным, но если у кого-то есть хорошая идея о том, что может происходить, это было бы невероятно полезно. Это единственная загвоздка, с которой я столкнулся, когда мне пришлось задавать вопрос по нескольким последним проектам. Это просто раздражает. Спасибо.

Причина, по которой все кнопки переворачивают только первую карту, заключается в том, что ваш id жестко закодирован как "card1", значение id в html должно быть уникальным. id "card1" нацелен только на первый элемент, который использует тот же id

<input type="checkbox" id="card1" class="more" aria-hidden="true">

Вы должны генерировать динамические id для каждой итерации, поэтому, например, вы можете генерировать значения id с "card1", "card2", "card3" и т.д.

То же самое с js

 document.getElementById('card1').addEventListener('click', function () {
            tab.classList.add('back');
        }, false);

        document.getElementById('card1').addEventListener('click', function () {
            tab.classList.remove('front');
        }, false);

Необходимо создать динамический слушатель событий для каждого id

Посмотрите, как работает html id на HTML id

Итак, после того, как Dhia Aziz Rizqi подтвердил мои подозрения, что проблема на самом деле была в ID, и не было никакой другой глубинной проблемы, я сразу же попытался динамически вызвать ID проекта с помощью Django внутри JS функции. Это сработало идеально.

Раньше я не использовал теги шаблонов Django внутри JS-функции, поэтому я не был уверен, как все пройдет, но для всех, кто столкнется с этой проблемой...

Необходимо изменить javascript на следующий:

    <script>
        (function () {
            var tab = document.querySelector('.card');

            document.getElementById('{{ project.id }}').addEventListener('click', function () {
                tab.classList.add('back');
            }, false);

            document.getElementById('{{ project.id }}').addEventListener('click', function () {
                tab.classList.remove('front');
            }, false);

        })();
    </script>

И HTML к этому:

 <div class="wrapper">
                    {% for project in projects %}
                        <div class="card">
                            <label for="{{ project.id }}"></label><input type="checkbox" id="{{ project.id }}" class="more" aria-hidden="true">
                            <div class="content">
                                <div class="front"
                                     style="background-image: url({{ project.image }})">
                                    <div class="inner">
                                        <h2>{{ project.title}}</h2>

                                        <label for="{{ project.id }}" class="button" aria-hidden="true">
                                            Details
                                        </label>
                                    </div>
                                </div>
                                <div class="back">
                                    <div class="inner">
                                        <div class="info">

                                        </div>
                                        <div class="description">
                                            <p>{{ project.description }}</p>

                                        </div>
                                        <div class="location">Warsaw, Poland</div>
                                        <div class="price">38€ / day</div>
                                        <label for="{{ project.id }}" class="button return" aria-hidden="true">
                                            <i class="fas fa-arrow-left"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

Решением было просто динамически добавить ID проекта вместо фиксированного ID.

Он прекрасно работает с Django.

Вернуться на верх