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

Question

我有这个使用jQuery的js代码卡配对游戏。到目前为止，我已经尝试过这一方法，但是当我比较两组卡片时，即使我单击的2张卡片不匹配，它也始终进入条件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元素，并且尝试从div元素读取数据属性。