1

我模拟了纸牌游戏——你可以在这里看到当我转动它们时，我将一个类“返回”给它们，它们的背景图像由一个公共 ID 给出。正如您在转动其中两个后看到的那样，它们又掉头了。但是，如果它们具有相同的图像，我想让它们保持转动。并且以任何方式我会尝试我无法弄清楚如何使用组合的长度，例如

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

删除使它们可点击的类“面”。

4

2 回答 2

0

不知道它是否能解决您的所有问题，但您对 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>
于 2013-01-15T13:54:33.123 回答
0

我查看了您的代码并在此处发布了一个工作版本 正如上一篇文章所指出的，您要确保您的元素具有唯一的 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);

在第二个动画结束时，代码现在查找所有显示背面的卡片（不包括当前卡片）并检查它们是否具有相同的“cardFace”值。如果它们都标记为完成.

//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);
  });
}

让我知道这是否有帮助。

于 2013-01-15T16:31:23.170 回答