Jquery Transfer effect in ng-repeat

问题:

I am trying to add jquery Transfer effect to the dynamic images in the loop. Following is my code.

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

When user click on the add button the correct image transfer to the basket. But when user click on the "Remove" link it always transfer the finally added image to all the places. Can anybody help me to fix this issue?

Thanks

回答1:

After doing some research found the solution.

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