1 回答

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