javascript - 将图像链接到 javascript 命令 - Tinder 刷卡

Question

对于单向作业，我一直在使用这个 Tinder 刷卡代码:` http://codepen.io/developingidea/pen/meAIn

<div class="buddy" style="display: block;">
   <div class="avatar"  style="margin: 0 auto; display: block; background-image:url(images/girl1.jpg)"></div>
      <div class="bio">
         <h1>Name, 28</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </div>
</div>

我有两个图像“hi”和“bye”位于滑动功能下方我想链接到滑动功能所以当单击“hi”时图像向右滑动而当单击“bye”时图像滑动但是，我不确定如何执行此操作。

有人可以帮忙吗？谢谢。

Answer 1

最简单的解决方案是在按下按钮时调用 swipeleft 或 swiperight 事件，保持现有代码不变。

例如沿着这些线添加一些东西:

$("#bye").on("click", function(){
  $(".buddy").not(".rotate-left, .rotate-right").trigger("swipeleft");
});
$("#hi").on("click", function(){
  $(".buddy").not(".rotate-left, .rotate-right").trigger("swiperight");
});

编辑:由于有多个.buddy，您需要选择当前的。