仅当元素在页面上超过两个时，才能如何向元素添加另一个类？

Question

我模拟了纸牌游戏- 在这里可以看到它，当我转动它们时，我将类“返回”切换到它们，并且它们的背景图像由通用ID给出。 如您所见，当您将其中两个旋转时，它们会调低。 但是我想让他们转过身，如果他们有相同的形象。 而且我会以任何方式尝试我无法弄清楚如何使用像这样的组合的长度

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

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

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

我查看了您的代码，并在此处发布了工作版本，如前一篇文章所指出的那样，您想确保元素具有唯一的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设置为具有back类和代表第一个动画完成后的图像的类。

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

让我知道是否有帮助。