Question

我正在做一个记忆卡游戏（卡片背面朝上翻转，您必须打开并找到配对）

我有12个div，包含12张图像，并且有6对图像。如何编写JS或jQuery代码以检查图像是否相同？

我使用setAttribute向div添加了数据索引，但是在console.log上它们打印了undefined。

<div class="frontCard">
  <img src="frontCard1.jpg" alt="">
</div>
<div class="frontCard">
  <img src="frontCard2.jpg" alt="">
</div>
<div class="frontCard">
  <img src="frontCard1.jpg" alt="">
</div>

和js代码

const item = document.querySelectorAll(".card");
item.forEach((item, index) => {
    item.setAttribute("data-index", index);

})

var openCards = 0;
var points=0;
$(".card").click(function() {
    if (openCards >= 2) {

        $(".card").removeClass('cardOpen');

        $(this).addClass('cardOpen');
        openCards = 1;

    } else {
        $(this).addClass('cardOpen');
        openCards++;
        if (openCards == 2) {
            if (true)//this is where i need the condition
 {
                const openCard = document.querySelectorAll(".cardOpen");
                console.log("index:" + openCard.index);
                points++;
                console.log(points);
            }
        }
    }

});

Answer 1

基本上，您的js中有很多错误。首先-.card应该不是.frontCard吗？

我得到的代码可以按预期工作，即使它可能不是最漂亮的。查看代码段

const item = document.querySelectorAll(".frontCard");
item.forEach((item, index) => {
    item.setAttribute("data-index", index);

})

var openCards = 0;
var points=0;
$(".frontCard").click(function() {
    if (openCards >= 2) {
        $(".frontCard").removeClass('cardOpen');
        openCards = 1;
        $(this).addClass('cardOpen');                
    } else {
        $(this).addClass('cardOpen');
        openCards++;
        if (openCards == 2) {        
            if ($($(".cardOpen")[0]).find("img")[0].src == $($(".cardOpen")[1]).find("img")[0].src){
                const openCard = document.querySelectorAll(".cardOpen");
                console.log("index:" + openCard.index);
                points++;
                console.log(points);
                $(".frontCard").removeClass('cardOpen');
            }else{        
            	console.log("NoPoints")
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frontCard">
  <img src="https://seomofo-da30.kxcdn.com/wp-content/uploads/2010/05/google_logo_new.png" alt="test">
</div>
<div class="frontCard">
  <img src="https://i.dlpng.com/static/png/9013_preview.png" alt="test2">
</div>
<div class="frontCard">
  <img src="https://seomofo-da30.kxcdn.com/wp-content/uploads/2010/05/google_logo_new.png" alt="test3">
</div>

Answer 2

假设您的卡使用相同的图像，则可以对此进行检查。这将需要向每个卡添加ID字段，以便比较各个卡。

一种更好的方法是编写一些JavaScript以将卡片包含在数组中，并用[0,0,1,1,2,2 ...]之类的整数填充数组。然后，您可以使用它来洗牌，或显示它们并检查其值。只需给自己留下评论，指出哪个号码对应哪个卡：）

如果您始终从背面图片开始，然后以ID将元素替换为适当的新图片（或将其放置在其上方以隐藏它），这也将允许您动态显示它们。

如何检查2个<img>标签是否包含相同的图像

2 个答案: