我正在为使用 Django 模板标签迭代卡片的项目创建 css 翻转卡片。所有的按钮只翻转第一张牌

Question

正如标题所说。我很了解 Django，但我仍然掌握了使用 JS 来处理这类事情的窍门。我正在用 {% for project in projects %} 遍历卡片，一切都按预期显示。而且，当我单击第一张卡片上的按钮时，它会完美翻转卡片。然而，当我点击任何其他卡片的按钮时，它们也翻转第一张卡片，而不是翻转下一张卡片本身。我认为这与div或标签的id有关，并且尝试了一些方法但我还没有完全弄明白。

这是必要的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有关的牌：

    <style>

        .wrapper {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
        }

        .card {
            width: 420px;
            height: 340px;
            margin: 1em;
            perspective: 1500px;
        }

        .card .content {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
        }


        .more:checked ~ .content {
            transform: rotateY(180deg);
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transform-style: preserve-3d;
            border-radius: 6px;
        }

        .front .inner,
        .back .inner {
            height: 100%;
            display: grid;
            padding: 1.5em;
            transform: translateZ(90px) scale(0.75);
        }

        .front {
            background-color: #fff;
            background-size: cover;
            background-position: center center;
        }

        .front:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 6px;
            backface-visibility: hidden;
            background-image: url("{{ project.image }}");

        }

        .front .inner {
            grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
            justify-items: center;
        }

        .front h2 {
            grid-row: 2;
            margin-bottom: 0.3em;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #fff;
            font-weight: 500;
            text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
        }

        .front .rating i {
            margin: 0 1px;
        }

        .back {
            transform: rotateY(180deg);
            background-color: #fff;
            border: 2px solid #f0f0f0;
        }

        .back .inner {
            grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
            grid-template-columns: repeat(3, auto);
            grid-column-gap: 0.8em;
            justify-items: center;
        }

        .back .info {
            position: relative;
            display: flex;
            align-items: center;
            color: #355cc9;
            grid-row: 3;
        }

        .back .info:not(:first-of-type):before {
            content: "";
            position: absolute;
            left: -0.9em;
            height: 18px;
            width: 1px;
            background-color: #ccc;
        }

        .back .info span {
            font-size: 2em;
            font-weight: 700;
        }

        .back .info i {
            font-size: 1.2em;
        }

        .back .info i:before {
            background: linear-gradient(40deg, #355cc9, #438af3);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }

        .back .info .icon {
            margin-left: 0.3em;
        }

        .back .info .icon span {
            display: block;
            margin-top: -0.25em;
            font-size: 0.8em;
            font-weight: 600;
            white-space: nowrap;
        }

        .back .description {
            grid-row: 5;
            grid-column: 1/-1;
            font-size: 0.86em;
            border-radius: 5px;
            font-weight: 600;
            line-height: 1.4em;
            overflow: auto;
            color: #355cc9;
            padding-right: 10px;
        }

        .back .location,
        .back .price {
            font-weight: 600;
            color: #355cc9;
            grid-row: 1;
            font-size: 0.86em;
        }

        .back .location {
            grid-column: 1/3;
            justify-self: left;
        }

        .back .price {
            grid-column: 3/-1;
            justify-self: right;
        }

        .back .button {
            grid-column: 1/-1;
            justify-self: center;
        }

        .button {
            grid-row: -1;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            cursor: pointer;
            display: block;
            padding: 0 1.5em;
            height: 3em;
            line-height: 2.9em;
            min-width: 3em;
            background-color: transparent;
            border: solid 2px #fff;
            color: #fff;
            border-radius: 4px;
            text-align: center;
            left: 50%;
            backface-visibility: hidden;
            transition: 0.3s ease-in-out;
            text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        }

        .button:hover {
            background-color: #fff;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            text-shadow: none;
            color: #355cc9;
        }

        .button.return {
            line-height: 3em;
            color: #355cc9;
            border-color: #355cc9;
            text-shadow: none;
        }

        .button.return:hover {
            background-color: #355cc9;
            color: #fff;
            box-shadow: none;
        }

        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #859ddf;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #355cc9;
        }
    </style>

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

我不确定其他任何事情是否有帮助，但如果有人对可能发生的事情有一个很好的了解，那将是非常有帮助的。这是我遇到的唯一障碍，我不得不为我的最后几个项目提出问题。这很烦人。谢谢

Answer 1

之所以所有按钮只翻第一张牌是因为你的id硬编码为“card1”，id在html上的值应该是唯一的。 “card1”id 仅针对使用相同 id

的第一个元素

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

您应该为每次迭代生成动态 ID，例如，您可以使用“card1”、“card2”、“card3”等生成 ids 值。

与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

上的工作原理

Answer 2

因此，在 Dhia Aziz Rizqi 证实了我的怀疑之后，事实上，问题出在 ID 上；并且没有任何其他潜在问题，我立即去尝试在 JS 函数中使用 Django 动态调用项目 ID。效果很好。

我以前没有在 JS 函数中使用过 Django 模板标签，所以我不确定它会怎样，但是对于碰巧遇到这个问题的其他人...

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 配合得很好。

我正在为使用 Django 模板标签迭代卡片的项目创建 css 翻转卡片。所有的按钮只翻转第一张牌

I am creating css flip cards for projects using Django template tags to iterate over the cards. All of the buttons only flip the first card

javascript

css

django

jquery

responsive