ng-repeat 中的 Jquery Transfer 效果答案

【问题标题】：Jquery Transfer effect in ng-repeatng-repeat 中的 Jquery Transfer 效果
【发布时间】：2014-02-03 06:43:27
【问题描述】：

我正在尝试将 jquery Transfer 效果添加到循环中的动态图像。以下是我的代码。

<img ng-src="{{item.thumbnailImageUrl}}" width="221" height="190" alt="{{item.itemName}}" class="item-img-{{$index}}-addToCompare" id="item-img-{{$index}}" border="0"/>

<a href="javascript:addToCompare('add','{{$index}}')" class="item-{{$index}}-addToCompare">Add</a>

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");
  $('<style id="transferEffect" type="text/css">' + // Add new one
            '.ui-effects-transfer { background: url('+thumbnailImg+')  no-repeat; }' +
            '</style>').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+"')")
}

当用户单击添加按钮时，正确的图像传输到篮子。但是当用户点击“删除”链接时，它总是将最终添加的图像传输到所有地方。谁能帮我解决这个问题？

谢谢

【问题讨论】：

标签： jquery jquery-ui angularjs jquery-animate

【解决方案1】：

在做了一些研究后找到了解决方案。

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+"')")
}

【讨论】：