更改图像交换（三个变量）

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/ - 稍作修改以绑定到应用程序。 Thiy方式，我们摆脱

var self = this;