时间戳

首页 > 解决方案 > 打开出现日历的功能

javascript - 打开出现日历的功能

问题描述

我对 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!");
    }
}

抱歉，如果我忘记了什么或做错了什么，这是我的第一篇文章。如果是这样，请告诉我！

编辑 1

这是与日历相关的所有内容的小提琴！

https://jsfiddle.net/mw01shcn/

标签： javascripthtml

解决方案

您的主要问题来自于此：

加载 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 更改。

有很多方法可以翻转卡片，但我认为这个解决方案与你已经拥有的最相似。

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

推荐阅读