打开降临节日历的功能

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() {

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

});

我建议摆脱那部分代码。

现在，您需要从 checkDate 函数翻转卡片。这是与您的代码当前结构最相似的修复程序：

function checkdate(selectday, card) { // TAKE ANOTHER PARAMETER OF THE CARD CLICKED

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

   // var card = document.querySelector('.card'); THIS VARIABLE WAS NEVER USED SO I COMMENTED IT OUT AND STOLE THE NAME

    var datenow = new Date();

    if (datenow > dateselect) {

          //$('.scene').select(function() { // CAN JUST GET THE CARD FROM THE VARIABLE PASSED IN

                $(card).toggleClass("is-flipped"); // USING "card" INSTEAD OF YOUR GLOBAL SELECTOR

          //});

    } else {

        alert ("No cheating!");

    }

}

你因为我们现在把要翻转的卡片作为参数，所以我们需要更改html：

            <div> // I RELOCATED THE ONCLICK FUNCTION TO THE CARD ELEMENT

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

                     <div class="card"  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

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

                         <div class="card__face card__face--back"><span style="font-size: 1.5em; text-decoration: underline">Header</span><br><br>Text here</div>

                     </div>

                </div>

            </div>

  

您需要对所有卡片进行 HTML 更改。

翻牌的方法有很多，但我认为这个解决方案与您已有的解决方案最相似。

同样，我们不再告诉卡片在单击时翻转，而是告诉卡片在可接受的日期范围内翻转。