切换一个使用相同 class 的 div

Question

我正在尝试将一些 div 与相同的 class 一起使用，但我的目标是切换到仅点击其中一个 div 的状态。我的意思是，当我点击“+”时，我只想同时显示我点击的位置和所有这些，所以我尝试了一些类似的东西 example 但没有运气，没有任何效果。

更新

我已经更新了代码，感谢您的帮助，它完美地工作了。

但现在不知道为什么，我点击“+”之前可见的内容比我的卡片宽度大，与我点击“+”时可见的内容相反。有人能解释一下为什么我的内容与我的名片不完全吻合吗？您可以点击“+”和“-”来查看区别。

 $(function() {
  $(".click-me").each(function() {
    $(this).flip({
      axis: "y",
      reverse: true,
      trigger: "click",
      speed: '800',
      front: $(this).siblings('.my-front-card'),
      back: $(this).siblings('.my-back-card'),
      autoSize: false
    });
  });
});


$(".click-me").click(function() {
  $(this).html($(".click-me").html() == '+' ? '-' : '+');
});

a {
color: white;
}

.card-container {
width: 100%;
}

.card {
max-width: 500px;
width: 31.3%;
margin: 0 1%;
min-height: 260px;
padding: 40px 40px 20px 40px;
border-radius: 20px;
background: black;
color: white;
float: left;
box-shadow: 10px 10px 30px #ccc;
}

.card-container .card {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
  
.my-front-card, .my-back-card {
max-width: 420px;
width: 100%; 
min-height: 260px;
}
  
.click-me {
cursor: pointer;
color: white;
text-align: right;
position: absolute;
bottom: 0px;
font-size: 40px;
font-weight: bold;
}


@media screen and (max-width: 1024px) {
.card {
width: auto;
float: none;
    }
}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>



    <div class="card-container">
  <div class="card">

  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>
  
  
  <div class="my-back-card">
  <a href="http://google.com">link</a>
  Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div> 
  
  
  <div class="click-me">+</div>

</div>



<div class="card">

  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>
  
  
  <div class="my-back-card">
  <a href="http://google.com">link</a>
  Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div> 
  
  
  <div class="click-me">+</div>

</div>





<div class="card">

  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>
  
  
  <div class="my-back-card">
  <a href="http://google.com">link</a>
  Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div> 
  
  
  <div class="click-me">+</div>

  </div>
</div>

Answer 1

你的 front 和 back 将所有带有 class .my-front-card 和 .my-back-card 的元素保存在一个数组中。为了仅翻转所点击元素的卡片，您需要 select 像这样

$(this).closest('.card).find('.my-front-card')

为此，您需要分别对每个元素应用“翻转”：

$.each($(".click-me"), function() {
    $(this).flip({
        ...
        front: $(this).closest('.card).find('.my-front-card'), 
         
        ...
    });
});

$(function() {
  $.each($(".click-me"), function() {
    $(this).flip({
        axis: "y",
        reverse: true,
        trigger: "click",
        speed: '800',
        front: $(this).closest('.card').find('.my-front-card'),
        back: $(this).closest('.card').find('.my-back-card'),
        autoSize: false
      });
  });
      
});
    
    
$(".click-me").click(function(){
   $(".click-me").html($(".click-me").html() == '+' ? '-' : '+');
});

.card {
max-width: 500px;
min-height: 60px;
padding: 40px 40px 20px 40px;
border-radius: 20px;
background: grey;
}
      
.my-front-card, .my-back-card {
max-width: 500px;
min-height: 60px;
}
      
.click-me {
cursor: pointer;
text-align: right;
position: absolute;
bottom: 0px;
font-size: 40px;
font-weight: bold;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>



<div class="card">


  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>
  
      
  <div class="my-back-card">
  <a href="http://google.com">link</a>
  Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div> 
      
      
  <div class="click-me">+</div>
   
   
</div>












<div class="card">


  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>
  
      
  <div class="my-back-card">
  <a href="http://google.com">link</a>
  Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div> 
      
      
  <div onclick="ChangeText()"  class="click-me">+</div>
   
   
</div>













<div class="card">


  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>
  
      
  <div class="my-back-card">
  <a href="http://google.com">link</a>
  Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
  </div> 
      
      
  <div onclick="ChangeText()"  class="click-me">+</div>
   
   
</div>

Answer 2

jQuery 查找 $(".click-me") 收集了不止一个元素（此处为 3 个）。

所以你需要分别实例化它们中的每一个 .flip()。此外，您需要更具体地指定 front 和 back 元素，使用 $(this).siblings() 确保只查找一个元素。

我删除了 ChangeText() 内联 onclick 属性，因为它未定义...

$(function() {
  $(".click-me").each(function() {
    $(this).flip({
      axis: "y",
      reverse: true,
      trigger: "click",
      speed: '800',
      front: $(this).siblings('.my-front-card'),
      back: $(this).siblings('.my-back-card'),
      autoSize: false
    });
  });
});


$(".click-me").click(function() {
  $(this).html($(".click-me").html() == '+' ? '-' : '+');
});

.card {
  max-width: 500px;
  min-height: 60px;
  padding: 40px 40px 20px 40px;
  border-radius: 20px;
  background: grey;
}

.my-front-card,
.my-back-card {
  max-width: 500px;
  min-height: 60px;
}

.click-me {
  cursor: pointer;
  text-align: right;
  position: absolute;
  bottom: 0px;
  font-size: 40px;
  font-weight: bold;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>



<div class="card">


  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>


  <div class="my-back-card">
    <a href="http://google.com">link</a> Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor
    turpis.
  </div>


  <div class="click-me">+</div>


</div>












<div class="card">


  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>


  <div class="my-back-card">
    <a href="http://google.com">link</a> Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor
    turpis.
  </div>


  <div class="click-me">+</div>


</div>













<div class="card">


  <div class="my-front-card">
    Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
  </div>


  <div class="my-back-card">
    <a href="http://google.com">link</a> Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor
    turpis.
  </div>


  <div class="click-me">+</div>


</div>

切换一个使用相同 class 的 div

Toggle one div who use same class

html

javascript

jquery

onclick

toggle