淘汰foreach beforeRemove animate anomaly：animate SOMETIMES应用于相邻的相同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无法正确检测您在点击卡片时删除的项目，因为您有阵列中多次使用相同的卡片。所以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。