javascript - 为每张卡片添加一个按钮以翻转

Question

所以我的基本想法是在每张卡片上添加一个按钮，然后翻转卡片并重置之前翻转的卡片。现在我如何为每张卡片制作一个特定的按钮，该按钮可以翻转/取消翻转卡片并取消翻转之前翻转的卡片（在需要时）

我有我在这个问题中找到的这个JSFiddle。我环顾互联网，但找不到任何解决这个特定问题的方法。可能与此类似。希望这可以帮助:) 类似的东西也许

$('.flip-container .flipper').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');

  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

/* flip the pane when hovered */

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 250px;
  height: 250px;
}


/* flip speed */

.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}


/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}


/* front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

.artist-1 {
  background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

标签： javascripthtmlcss

Answer 1

看来您只需要添加一个按钮并将其添加到选择器

$('.flip-container .flipper button').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');
  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

/* flip the pane when hovered */

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 250px;
  height: 250px;
}


/* flip speed */

.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}


/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}


/* front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

.artist-1 {
  background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
      <button>Flip</button>

    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
      <button>Flip</button>
    </div>
    <div class="back">
      <p>You won</p>
    </div>

  </div>

</div>