javascript - 如何在单击按钮或链接时使用 javascript 或 jquery 动态制作或创建 Binder ？

Question

<分区>

Answer 1

如本 JSFiddle , 我已经为 <a class="new"> 添加了一个事件监听器选择它，然后在单击事件时阻止其默认操作。之后，我克隆了第一个卡片元素并将其插入到(添加您的故事)链接之前，这样我们始终将该链接放在底部

$(document).ready(function(){ 
	$('.new').on('click', function(event){
        event.preventDefault();
       $('.card').first().clone().insertBefore($('.new'));    
    });
});

.card {
    margin:5px;
    position: relative;
    float: left;
    width: 200px;
    height: 200px;
    text-align: center;
    margin-top: 50px;
}
.card:nth-child(1) {
    margin-top: 100px;
    margin-left: 100px;
    margin-right: 8px;
}
.card:nth-child(2) {
    margin-top: 100px;
    margin-right: 8px;
}
.card.effect__ADD {
    margin-left: 8px;
}
.card__front, .card__back {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.card__front, .card__back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.card__front {
    background-color:blue;
}
.card__back {
    background-color:orange;
    transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}
.card.effect__ADD:hover .card__front {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
.card.effect__ADD:hover .card__back {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
}
span > p {
    margin-top: 80px;
    font-family:Arial;
    font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="card effect__hover">
  <div class="card__front"> <span class="card__text"></span>

  </div>
  <div class="card__back"> <span class="card__text"></span>

  </div>
</div>
</div>
<div class="card effect__hover">
  <div class="card__front"> <span class="card__text"></span>

  </div>
  <div class="card__back"> <span class="card__text"></span>

  </div>
</div>
<div class="card effect__hover">
  <div class="card__front"> <span class="card__text"></span>

  </div>
  <div class="card__back"> <span class="card__text"></span>

  </div>
</div>
<a href="" class="new">
  <div class="card effect__ADD">
    <div class="card__front">
      <span class="card__text"></span>
    </div>
    <div class="card__back">
      <span class="card__text"><p>Add Your Story</p></span>
    </div>
  </div>
</a>

请注意，您可能需要为翻转卡片添加边距以在它们之间留出间隙

评论更新:

翻牌乱排是因为:

1. 在.card你有 CSS float: left; , 删除它并添加这一行 display:inline-block; , 这会将它们排在同一行上
2. 在.card:nth-child(1) css 删除这两行 margin-top: 100px;和 margin-left: 100px; ，通过这样做，您将省略第一张卡片之前不需要的间隙。 完成上述操作后，您将得到的结果如下 JSFiddle