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

我模拟了一个纸牌游戏——当我打开它们时，你可以看到它，我将一个类“返回”给它们，它们的背景图像由一个公共id给出。当你打开其中两个后，你可以看到它们返回。但如果它们有相同的图像，我想让它们保持旋转。 无论如何，我都不知道如何使用像这样的组合的长度

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

---

删除使他们能够单击的类“face”。

不知道它是否能解决您的所有问题，但您对IDs的使用不是最好的：

<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>

---

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

在第二个动画结束时，代码现在查找所有显示其背面的卡，不包括当前的卡，并检查它们是否具有相同的cardFace值。如果它们具有相同的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);
  });
}

---

如果有帮助，请告诉我。

选择器.back.i1无效。你不应该依赖于具有相同ID的多个元素。为什么不使用它？方法……它们的背景图像是由一个公共ID给出的。HU？你也应该考虑把演示逻辑和控制逻辑分开。随着应用程序变得更加复杂，使程序逻辑依赖于HTML属性的方式将变得脆弱。i、 例如，为您的卡制作一个模型，就像一个数组，您处理它而不是实际的显示元素

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