Question

我正在使用jQuery Flip插件在点击时翻转5张卡片（仅一个方向），每张卡片都有唯一的ID。
单击全部5张卡片后，我要显示一个隐藏的div。
这是我的代码（例如，我仅使用两张卡/ 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

我必须假定翻转时将新的CSS类添加到卡中。只需为该类编写选择器函数并检查其长度即可。即

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

Answer 2

看看我的解决方案。我希望这会有所帮助。单击后，我调用添加该类的函数，并检查有多少次单击。如果在这种情况下将为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');
      })
     }
   })
  })
 })

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

2 个答案: