1 回答

TA貢獻1811條經驗 獲得超5個贊
您的主要問題來自于此:
加載 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 更改。
翻牌的方法有很多,但我認為這個解決方案與您已有的解決方案最相似。
同樣,我們不再告訴卡片在單擊時翻轉,而是告訴卡片在可接受的日期范圍內翻轉。
添加回答
舉報