更改圖像交換（三個變量）

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;