单击 5 个选择器后显示隐藏的 div

Question

我正在使用jQuery Flip 插件在点击时翻转 5 张卡片（只有一个方向），每张卡片都有一个唯一的 ID。
我有一个隐藏的 div，我想在点击所有 5 张卡片后显示它。
这是我的代码（例如我只使用两张卡片/div）：

 <div id="card" class="card"> 
 <div class="front"> 
 <img src="images/front-500.png"/>
 </div> 
 <div class="back">
 <img src="images/back-1-500.png"/>
 </div> 
 </div>

 <div id="card2" class="card"> 
 <div class="front"> 
 <img src="images/front-500.png"/>
 </div> 
 <div class="back">
 <img src="images/back-1-500.png"/>
 </div> 
 </div>

 <div class="hidden">
 <h2> hidden content</h2>
 </div>

 <script>
 $( document ).ready(function() {
 // $("#card").flip(true);
 $("#card").flip({
      trigger: 'manual'
    });
 $("#card").click(function(){
      $("#card").flip(true);

    });
 $("#card2").flip({
      trigger: 'manual'
    });
 $("#card2").click(function(){
      $("#card2").flip(true);

    });
 </script>

不确定如何编写如果所有 ID 都被点击然后显示 .hidden
任何帮助将不胜感激。
干杯

Answer 1

看看我的解决方案。我希望它会有所帮助。 点击后，我调用添加类的函数，查看点击次数。如果在这种情况下会有 2 个，我会显示隐藏的 div

$(function () {
  $("#card1").flip({
    trigger: 'manual'
  });
  $("#card1").click(function () {
    $("#card1").flip(true);
    checkLenght($(this));
  });
  $("#card2").flip({
    trigger: 'manual'
  });
  $("#card2").click(function () {
    $("#card2").flip(true);
    checkLenght($(this));
  });

  function checkLenght(thisObj) {
    thisObj.toggleClass('card-flip')
    let checkFive = document.querySelectorAll('.card-flip');
    if (checkFive.length >= 2) {
      const hiddenText = document.querySelector('#hidden-text'); hiddenText.removeAttribute('class')
    }
  }

});

body {
      margin: 0 100px;
    }

    .card {
      width: 100px;
      height: 100px;
      margin: 20px;
      display: inline-block;
    }

    .front,
    .back {
      border: 2px gray solid;
      padding: 10px;
    }

    .front {
      background-color: #ccc;
    }

    .back {
      background-color: red;
    }

    .hidden {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.js"></script>


<div id="card1" class="card">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="card2" class="card">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="hidden-text" class="hidden">
  <h2> hidden content</h2>
</div>

不同的解决方案

$(function () {
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    $(`.${card.className}`).flip({ trigger: 'manual' })
    card.addEventListener('click', function () {
      $(this).flip(true);
      $(this).toggleClass('card-flip')
      let checkFive = document.querySelectorAll('.card-flip');
      if (checkFive.length >= 2) {
        const hiddenText = document.querySelector('#hidden-text'); hiddenText.removeAttribute('class')
      }
    })
  })
})

下一个解决方案;)

$(function () {
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    $(`.${card.className}`).flip({ trigger: 'manual' })
    card.addEventListener('click', function () {
     $(this).flip(true);
     $(this).toggleClass('card-flip')
     let checkFive = document.querySelectorAll('.card-flip');
     if (checkFive.length >= 5) {
       const hiddenText = document.querySelector('#hidden-text'); 
       hiddenText.removeAttribute('class')
       const winners = document.querySelectorAll('.winner');
       console.log(winners)
       winners.forEach(winner => {
       winner.classList.add('winner-border');
      })
     }
   })
  })
 })

Answer 2

我必须假设卡片翻转时添加了一个新的 css 类。只需为该类编写一个选择器函数并检查长度。即

    document.querySelectorAll('.flippedSelector').length >= 5 && showHiddenDiv();