在ng-repeat中的Jquery传递效应

我试图将jquery传输效果添加到循环中的动态图像。 以下是我的代码。

{{item.itemName}} Add 
 function addToCompare(mAction,index) { e = document.getElementById('myAngularApp'); scope = angular.element(e).scope(); scope.$apply(function() { scope.addToShortlist(mAction,index); }); if (mAction == "add") { var thumbnailImg = $(".item-img-"+index+"-addToCompare").attr("src"); $('' + // Add new one '.ui-effects-transfer { background: url('+thumbnailImg+') no-repeat; }' + '').appendTo('head'); $(".shortListed-Basket").show(); $(".item-img-"+index+"-addToCompare").effect("transfer",{ to: $(".shortListed-Basket") }, 1000); $(".hotel-"+index+"-addToCompare").text('Remove'); $(".item-"+index+"-addToCompare").attr("href","javascript:addToCompare('remove','"+index+"')"); } else { $(".shortListed-Basket").effect("transfer",{ to: $(".item-img-"+index+"-addToCompare") }, 1000); $(".item-"+index+"-addToCompare").text('Add'); $(".item-"+index+"-addToCompare").attr("href","javascript:addToCompare('add','"+index+"')") } 

当用户点击添加按钮时,正确的图像传输到购物篮。 但是当用户点击“删除”链接时,它总是将最终添加的图像传输到所有位置。 有人可以帮我解决这个问题吗?

谢谢

经过一番研究后发现了解决方案。

 var thumbnailImg = $(".item-img-"+index+"-addToCompare").attr("src"); if (mAction == "add") { $(".shortListed-Basket").show(); $(".item-img-"+index+"-addToCompare").effect("transfer",{ to: $(".shortListed-Basket") }, 1000); $(".ui-effects-transfer:last").css("background-image", "url(" + thumbnailImg + ")"); $(".hotel-"+index+"-addToCompare").text('Remove'); $(".item-"+index+"-addToCompare").attr("href","javascript:addToCompare('remove','"+index+"')"); } else { $(".shortListed-Basket").effect("transfer",{ to: $(".item-img-"+index+"-addToCompare") }, 1000); $(".ui-effects-transfer:last").css("background-image", "url(" + thumbnailImg + ")"); $(".item-"+index+"-addToCompare").text('Add'); $(".item-"+index+"-addToCompare").attr("href","javascript:addToCompare('add','"+index+"')") }