如何使用jquery比较两张卡是否匹配？

Question

我有这个使用 jquery 的 js 代码卡片匹配游戏。到目前为止我已经尝试过这个，但是当我比较两组卡片时，即使我点击的两张卡片不匹配，它总是会出现card match 的条件。

这方面似乎有什么问题，请帮忙！

这是在pair_Cards 函数中：

// compare two class selected
if ($('.selected').length == 2) {
  // first and last data is same data value = match
  if ($('.selected').first().data('card-id') == $('.selected').last().data('card-id')) {
    alert("Card Match");
  } else {
    alert("Card not match");
  }
}

我有下面的完整代码：

$(document).ready(function() {
  var app = {
    cards: ["ace_of_clubs.png", "ace_of_clubs.png",
      "2_of_clubs.png", "2_of_clubs.png",
      "3_of_clubs.png", "3_of_clubs.png",
      "4_of_clubs.png", "4_of_clubs.png",
      "5_of_clubs.png", "5_of_clubs.png",
      "6_of_clubs.png", "6_of_clubs.png"
    ],
    init: function() {
      app.shuffle_cards();
    },
    shuffle_cards: function() {
      var random, temp;

      for (i = 1; i < app.cards.length; i++) {
        random = Math.round(Math.random() * i);
        temp = app.cards[i];
        app.cards[i] = app.cards[random];
        app.cards[random] = temp;
      }
      console.log(app.cards);
      app.assign_Cards();
    },
    assign_Cards: function() {
      $('#distribute').click(function() {
        $('.card_ img').css({
          "opacity": "0"
        });
        $('.card_').addClass('removebg');

        $('.card_ img').each(function(index) {
          // assign each images randomly on each section
          $(this).attr("src", "img/" + app.cards[index]);
          // get the length value of each data attribute declaration
          $(this).attr("data-card-id", app.cards[index].length);
        });
        alert("Cards has been assigned randomly.");
        app.click_Handlers();
      })
    },
    click_Handlers: function() {
      $('.card_ img').click(function() {
        // add card-id data attribute
        $(this).data('card-id');
        $(this).addClass('selected');
        $(this).css({
          "opacity": "1"
        });
        app.pair_Cards();
      });
    },
    pair_Cards: function() {
      if ($('.selected').length == 2) {
        // first and last data is same data value = match
        if ($('.selected').first().data('card-id') == $('.selected').last().data('card-id')) {
          alert("Card Match");
        } else {
          alert("Card not match");
        }
      }
    }
  };
  app.init();
});

.wrapper {
  margin: 0 auto;
  padding: 0;
  position: relative;
  max-width: 100%;
  width: 1080px;
}

[class^="card_"] {
  background: url(img/back.png) no-repeat center top;
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 159px;
  height: 238px;
  border: 2px solid #000;
  margin: 0 auto 6px;
}

[class^="card_"] img {
  width: 157px;
  height: 238px;
}

.main_con {
  text-align: center;
  position: relative;
}

.removebg {
  background: none;
}

#distribute {
  display: block;
  margin: 30px auto 10px;
  border: 2px solid #000;
  background: #f00;
  color: #fff;
  text-transform: uppercase;
  padding: 0;
  border-radius: 5px;
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_con">
  <div class="wrapper">
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>
    <div class="card_"><img src="" alt="" class="unmatched"></div>

    <a href="#" id="distribute">Distribute Cards</a>
  </div>
</div>

Answer 1

只要您为每张卡分配相同的 ID，您的逻辑就可以正常工作：

$(this).attr("data-card-id", app.cards[index].length);

不管你点击哪张卡片，你都会得到“匹配”的结果。

你可能想把上面的代码改成这个

$(this).attr("data-card-id", app.cards[index]);

更新：

另外，将您的 if 语句更新为：

if($('.selected').first().find('img').data('card-id') === $('.selected').last().find('img').data('card-id'))

您为 img 元素分配了 data 属性，并尝试从 div 元素中读取 data 属性。