我有这个代码来显示一副牌。它在 Windows、Android 和大多数较新的 IOS 设备上运行得非常好。由于某种原因，卡上的 onClick() 在某些较旧的 IOS 设备上不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
box-sizing: border-box;
position: absolute;
left: 50px;
top: 50px;
font-family: 'Suez One', cursive;
}
.red-box {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 230px;
width: 300px;
height: 25px;
background-color: #FFCBAA;
z-index: 1;
}
.randomSuit {
position: absolute;
left: 50px;
top: 50px;
}
.card {
background-image: radial-gradient(#eeaeca, #94bbe9);
left: 44%;
top: 33%;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translateY(0);
position: absolute;
width: 100px;
height: 150px;
border-radius: 10px;
font-size: 0px;
-webkit-transition: background-image 0.7s ease-in-out;
transition: all 700ms, font-size 500ms, background-image 0.7s ease-in-out;
border: 2px solid #060303;
cursor: pointer;
border-bottom-color: #933;
box-shadow: -10px 40px 20px 2px rgba(0,0,0,0);
display: flex;
align-items: center;
justify-content: center;
color: #333;
white-space: normal; /* or white-space: pre-wrap; */
word-wrap: break-word;
text-align: center; /* Add this line to center the text */
&.opened {
transform: scale(1.5) rotateX(0) rotateY(180deg) rotateZ(0) translateY(0) !important;
box-shadow: 0 5px 14px rgba(0,0,0,0.1);
font-size: 14px;
background-image: radial-gradient(#ffffff, #ffffff);
}
&.is-removed {
transform: translateY(200%) !important;
font-size: 0px;
background-image: radial-gradient(#eeaeca, #94bbe9);
height: 75px;
border-radius: 10px 10px 0 0;
box-shadow: 0 -5px 5px rgba(0,0,0,0.01);
}
&.card.opened span {
transform: scaleX(-1);
display: inline-block;
}
}
.card:first-child {
box-shadow: 12px 12px 0px 12px rgba(0,0,0,0.3);
}
.card.down:last-child:hover {
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translateZ(50px) !important;
box-shadow: -10px 40px 20px 2px rgba(0,0,0,0.2);
}
.cards {
height: auto;
width: auto;
}
</style>
<div class="cards">
<!-- generate all 52 cards with values -->
<script>
let suits = ['Hjerter', 'Spar', 'Ruter', 'Kløver'];
let values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
let translateZValue = 1;
let cards = [];
let allCardValues = [];
for (let suit of suits) {
for (let value of values) {
allCardValues.push(`${value}`);
}
}
// Shuffle the array of card values
for (let i = allCardValues.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[allCardValues[i], allCardValues[j]] = [allCardValues[j], allCardValues[i]];
}
// Generate card HTML using shuffled values
for (let cardValue of allCardValues) {
const randomRotation = Math.random() * (2) - 42;
const cardHtml = `<div class='card down' style='transform: rotateX(60deg) rotateY(0deg) rotateZ(${randomRotation}deg) translateZ(${translateZValue}px);' onclick="cardClickHandler.call(this)"><span>${cardValue}</span></div>`;
cards.push(cardHtml);
translateZValue += 1;
}
$('.cards').append(cards);
</script>
</div>
<div class="red-box"></div>
<script>
function cardClickHandler() {
if ($(this).hasClass('down')) {
$(this).removeClass('down');
$(this).addClass('opened');
} else if ($(this).hasClass('opened')) {
$(this).addClass('is-removed');
// Find the new top card and make it clickable
const isTopCard = $('.card:not(.is-removed):last');
}
}
</script>
</head>
</html>
我尝试了很多不同的方法来读取用户的点击。除旧版 IOS 外，所有功能均正常。
之前我的 onClick 函数被这个替换了，并且我没有在 cardHtml div 中指定 onclick="cardClickHandler.call(this)" ：
$('.card').click(function(){
我也尝试过这个：
$('.card').on('点击触摸结束', function(event) {
还有这个：
$('.card').on('点击触摸启动', function() {
我想出了如何使其可点击。必须在 javascript 中添加所有更改样式元素。对于 eksample：
clickedCard.style.webkitTransition=transitionProperties;