Question

我模拟了一场纸牌游戏 - 你可以看到它here当我转过身来时，我将一个班级“回”给他们，他们的背景图片由一个共同的id给出。正如你所看到的那样，当你转动其中两个时，它们会向下转。但是如果他们有相同的形象，我想让他们转过身来。以任何方式我会尝试我无法计算如何使用像

这样的组合的长度

if($('.back.#i1').length==2) {do smth}

删除使其可点击的“face”类。

Answer 1

不知道它是否会解决您的所有问题，但您使用ID并不是最好的：

<div id="content">
    <div id="i1" class="card face"></div>
    <div id="i2" class="card face"></div>
    <div id="i1" class="card face"></div>
    <div id="i2" class="card face"></div>
</div>

您应该使用课程：

<div id="content">
    <div class="i1 card face"></div>
    <div class="i2 card face"></div>
    <div class="i1 card face"></div>
    <div class="i2 card face"></div>
</div>

Answer 2

我查看了您的代码并发布了一个正常工作的版本here 正如之前的帖子所指出的，您希望确保您的元素具有唯一ID，否则在尝试定位它们时会遇到问题。所以像这样：

<div id="content">
  <div id="i1" class="card face" cardFace="image1"></div>
  <div id="i2" class="card face" cardFace="image2"></div>
  <div id="i3" class="card face" cardFace="image1"></div>
  <div id="i4" class="card face" cardFace="image2"></div>
</div>

我更新了你的css和代码中的逻辑以使用这些div。代码现在做的是在初始元素上单击它保存它没有变量的卡面，然后它将div设置为具有后退类和在第一个动画完成后表示图像的类

var myCardface = $(this).attr("cardFace");
...
//Toggle card back status
$(this).toggleClass('back');
// Set the image to be shown
$(this).toggleClass('back_'+myCardface);

在第二个动画结束时，代码现在查找所有显示其背面的牌（不包括当前的牌），并检查他们是否具有相同的卡片＆＃34; cardFace＆＃34;如果它们这样做，则标记它们都已完成。

//Check for other open cards having the same cardFace value
$("#content").find(".back").not("#"+$(this).attr("id")).each(function(index){
if(myCardface == $(this).attr("cardFace")){
  matchFound = true;
  $(this).toggleClass('done');
}

if(matchFound == true){
  $(this).toggleClass('done');
}

如果背面已经打开了两张卡片，则代码会将这些卡片翻转回来，以便它们不会保持打开状态。

var unmatchedCards = $('.back:not(.done)').length
//Reset the cards
if(unmatchedCards == 2){
  $('.back:not(.done)').each(function(){
    $(this).animate({
      rotateY: "+=" + (Math.PI) / 2
    }, 500, function() {
      //Toggle card back status
      $(this).toggleClass('back');
      // Set the image to be shown
      $(this).toggleClass('back_'+$(this).attr("cardFace"));
    }).animate({
      rotateY: "+=" + (Math.PI) / 2
    }, 500);
  });
}

如果有帮助，请告诉我。

如果元素在页面上超过两个，我怎么能添加另一个类？

2 个答案: