打开降临节日历的功能

Question

我是 html 的新手，尤其是 javascript，所以我对这些东西还不是很好。

我一直在尝试为我的朋友制作一个显示交互式出现日历的 html 页面。我希望页面只显示某一天的框（所以在 12 日只显示第 12 个框）和之前的框。

首先，我希望得到一个解决方案来做到这一点，但由于几个小时以来我一直在失败，所以我现在可以打开它们了......

我现在的问题是，当向下滚动到第二个框时，它会将我带到页面的开头 (Firefox)，并且我能够打开应该锁定的框。所以我希望有人能帮我解决这个问题，因为这是我送给朋友的圣诞礼物，他一直在尝试教我 html。

我的卡片在 html 中看起来像这样

<div class="calendar">

    <div onclick="checkdate(1)">

        <div class="scene scene--card">

            <div class="card">

                <div class="card__face card__face--front i1"></div>

                <div class="card__face card__face--back">

                    <span>Header</span><br><br>Text

                </div>

            </div>

        </div>

    </div>

    <div onclick="checkdate(2)">

        <div class="scene scene--card">

            <div class="card">

                <div class="card__face card__face--front i2"></div>

                <div class="card__face card__face--back">

                    <span>Header</span><br><br>Text

                </div>

            </div>

        </div>

    </div>

</div>

我找到正确盒子的脚本看起来像这样

function checkdate(selectday) {

    var dateselect = new Date (2020, 10, selectday);

    var card = document.querySelector('.card');

    var datenow = new Date();

    if (datenow > dateselect) {

        $('.scene').select(function() {

        $(".card", this).toggleClass("is-flipped")});

    } else {

        alert ("No cheating!");

    }

}

对不起，如果我忘记了什么或做错了什么，这是我的第一篇文章。请让我知道是否是这种情况！

Answer 1

您的主要问题来自于此：加载 HTML/JS 时，您是在告诉一张卡片，点击它可以翻转。因此，无论您在 checkDate 函数中做什么，任何卡片都会翻转。var card = document.querySelector('.card');$('.scene').on('click', function() {&nbsp; &nbsp;$(".card", this).toggleClass("is-flipped");});我建议摆脱那部分代码。现在，您需要从 checkDate 函数翻转卡片。这是与您的代码当前结构最相似的修复程序：function checkdate(selectday, card) { // TAKE ANOTHER PARAMETER OF THE CARD CLICKED&nbsp; &nbsp; var dateselect = new Date (2020, 10, selectday);&nbsp; &nbsp;// var card = document.querySelector('.card'); THIS VARIABLE WAS NEVER USED SO I COMMENTED IT OUT AND STOLE THE NAME&nbsp; &nbsp; var datenow = new Date();&nbsp; &nbsp; if (datenow > dateselect) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //$('.scene').select(function() { // CAN JUST GET THE CARD FROM THE VARIABLE PASSED IN&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(card).toggleClass("is-flipped"); // USING "card" INSTEAD OF YOUR GLOBAL SELECTOR&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //});&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; alert ("No cheating!");&nbsp; &nbsp; }}你因为我们现在把要翻转的卡片作为参数，所以我们需要更改html：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div> // I RELOCATED THE ONCLICK FUNCTION TO THE CARD ELEMENT&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="scene scene--card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="card"&nbsp; onclick="checkdate(24, this)"> // HERE IS WHERE THE CLICK WILL BE DETECTED, AND PASSING "this" WILL PASS THE CARD HTML ELEMENT INTO THE JS FUNCTION&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="card__face card__face--front i24"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="card__face card__face--back"><span style="font-size: 1.5em; text-decoration: underline">Header</span><br><br>Text here</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;您需要对所有卡片进行 HTML 更改。翻牌的方法有很多，但我认为这个解决方案与您已有的解决方案最相似。同样，我们不再告诉卡片在单击时翻转，而是告诉卡片在可接受的日期范围内翻转。