knockout.js - 淘汰 foreach beforeRemove 动画异常：动画有时应用于相邻的相同 div

Question

这是小提琴：http: //jsfiddle.net/7z7kP/8/

每当相同花色的两张牌相邻时，动画就会应用于错误的牌。为什么？如果我犯了错误，我找不到我的错误。

   self.animateRemove = function(element,index,value){
             $(element).parent().find("div").eq(index).animate(
                 { height: 1, width: 1 }, 444, 
                    function () {
                        $(this).remove();
                    });
        };

Answer 1

您的问题是您string在您hand ko.observableArray的卡片中使用原始类型（所以KO选择了最后一个。

要解决问题，您需要使用hand数组中的对象而不是纯字符串：

所以修改你的addCard：

self.addCard = function(data,event){    
    var imgbutton= $(event.currentTarget);         

    self.hand.push( { suit: imgbutton.data("suit") } );            
};

而你的观点：

<div id="hand-container" data-bind="foreach: {data: hand, 
     afterAdd: afterAdd, beforeRemove: animateRemove}">
    <div data-bind="text: suit"></div>
</div>

演示JSFiddle。