Question

我有2个按钮（不苟言笑和微笑） 1.当我点击不苟言笑的img“苍蝇”到左侧时 2.当我点击微笑时，img“飞”到右侧。

但我需要做以下事情：

当我点击img并将其拖到左侧时，img +说明应该“飞”到左侧并显示js警告 - "You don't like this"。

当我点击img并将其向右拖动时，img +说明应该“飞”到右侧并显示警告 - "You like this"。

当我点击img并将其拖动到img下时，img +说明应“向下”并显示警告 - "You add this to favorite"。

这应该在javascript / html5 / css中完成。它将使用intelXDK编译到android平台。

HTML

<div id="food"></div>

            <div id="control">

              <div class="button no">
                <a href="#" class="trigger"></a>
              </div>

              <div class="button yes">
                <a href="#" class="trigger"></a>
              </div>

            </div>

</div>

JS代码

$('a[href*=#]').click(function(){
  return false;
});


var animationEndEvent = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

var Food = {
  wrap: $('#food'),
  selectFood: [
    {
      name: 'Hamburger',
      locaction: 'Poland, Warsaw, FoocCap',
      img: "images/photo/1.jpg"
    },
    {
      name: 'Chiness something',
      locaction: 'Poland, Warsaw, FoocKnajp',
      img: "images/photo/2.jpg"
    },
    {
      name: 'Nuggets',
      locaction: 'Japan, Tokyo, Yorazowa',
      img: "images/photo/3.jpg"
    },
    {
      name: 'Burger',
      locaction: 'Japan, Nagasaki, Nogoiau',
      img: "images/photo/4.jpg"
    },
    {
      name: 'Chicken pice',
      locaction: 'Russia, Moskow, Karmino',
      img: "images/photo/5.jpg"
    }
  ],   
  add: function(){
    var random =     this.selectFood[Math.floor(Math.random() * this.selectFood.length)];
    this.wrap.append("<div class='foodChoose'><img alt='" + random.name + "' src='" + random.img + "' /><span><strong>" + random.name + "</strong>, " + random.locaction + "</span></div>");
  }
}

var App = {
  yesButton: $('.button.yes .trigger'),
  noButton: $('.button.no .trigger'),
  blocked: false,
  like: function(liked){
    var animate = liked ? 'animateYes' : 'animateNo';
    var self = this;
    if (!this.blocked) {
      this.blocked = true;           
      $('.foodChoose').eq(0).addClass(animate).one(animationEndEvent, function() {
        $(this).remove();
        Food.add();
        self.blocked = false;
      });
    }
  }
};

App.yesButton.on('mousedown', function() {
  App.like(true);
});

App.noButton.on('mousedown', function() {
  App.like(false);
});

$(document).ready(function() {  
  Food.add();
});

CSS

@keyframes yes {
  0% {
    transform: scale(1) rotateZ(0deg);
    left: 0;
  }
  30% {
    transform: scale(1.05) rotateZ(0deg);
    left: 0;
  }
  100% {
    transform: rotateZ(45deg);
    left: 400px;
  }
}
.animateYes {
  animation-fill-mode: both;
  animation: yes 0.6s linear;
}

@keyframes no {
  0% {
    transform: rotateZ(360deg);
    right: 0;
  }
  30% {
    transform: scale(1.05) rotateZ(360deg);
    right: 0;
  }
  100% {
    transform: rotateZ(315deg);
    right: 400px;
  }
}
.animateNo {
  animation-fill-mode: both;
  animation: no 0.6s linear;
}

#control {
  position: relative;
  margin: 0 auto;
  width: 250px;
  top: -55%;
}
#control .button {
  width: 65px;
  height: 65px;
  background: #fff;
  position: absolute;
  top: 5px;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

#control .button .trigger:active {
  transform: translateY(-50%) scale(0.75);
  transition: all .05s linear;
}
#control .button .trigger:before { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-family: 'FontAwesome';
}
#control .no {
  left: 38px;
}
#control .no .trigger:before {
  content: "\2639";
  font-size: 40px;
  color: #c33;
}
#control .yes {
  right: 38px;
}
#control .yes .trigger:before {
  content: "\263A";
  font-size: 40px;
  color: #3b7;
}

可以找到当前的工作版本here。

Answer 1

自从我使用jquery以来已经有一段时间了 - 让我知道它是否是一个处理它的坏方法所以我可以更新/删除它？

您已经实现了animationEnd处理程序

var App = {
  yesButton: $('.button.yes .trigger'),
  noButton: $('.button.no .trigger'),
  blocked: false,
  like: function(liked){
    var animate = liked ? 'animateYes' : 'animateNo';
    var self = this;
    if (!this.blocked) {
      this.blocked = true;           
      $('.foodChoose').eq(0).addClass(animate).one(animationEndEvent, function() {
        $(this).remove();
        Food.add();
        self.blocked = false;
      });
    }
  }
};

只需将所需的参数传递给您的处理程序，例如

$('.foodChoose').eq(0).addClass(animate).one(animationEndEvent, 
  function(e) {
    function(liked) {
      $(this).remove();
      alert(liked);
      Food.add();
      self.blocked = false;
    }.bind(e.target, liked);
  }
);

我在这里传递了jquery自定义事件目标，该目标应与$('.foodChoose').eq(0)相同 ^^这意味着您不需要原始事件，可以删除外部函数，如：

$('.foodChoose').eq(0).addClass(animate).one(animationEndEvent, 
  function(liked) {
    $(this).remove();
    alert(liked);
    Food.add();
    self.blocked = false;
  }.bind($('.foodChoose').eq(0), liked);
);

添加了一个小提琴，包括代码：https://jsfiddle.net/jLugv92t/1/ - 略微修改以绑定到App。我们摆脱的方式

var self = this;

在交换时更改img（三个变量）

1 个答案: