1 回答

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
您的主要問題來自于此:
加載 HTML/JS 時(shí),您是在告訴一張卡片,點(diǎn)擊它可以翻轉(zhuǎn)。因此,無論您在 checkDate 函數(shù)中做什么,任何卡片都會(huì)翻轉(zhuǎn)。
var card = document.querySelector('.card');
$('.scene').on('click', function() {
$(".card", this).toggleClass("is-flipped");
});
我建議擺脫那部分代碼。
現(xiàn)在,您需要從 checkDate 函數(shù)翻轉(zhuǎn)卡片。這是與您的代碼當(dāng)前結(jié)構(gòu)最相似的修復(fù)程序:
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!");
}
}
你因?yàn)槲覀儸F(xiàn)在把要翻轉(zhuǎn)的卡片作為參數(shù),所以我們需要更改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>
您需要對(duì)所有卡片進(jìn)行 HTML 更改。
翻牌的方法有很多,但我認(rèn)為這個(gè)解決方案與您已有的解決方案最相似。
同樣,我們不再告訴卡片在單擊時(shí)翻轉(zhuǎn),而是告訴卡片在可接受的日期范圍內(nèi)翻轉(zhuǎn)。
添加回答
舉報(bào)