在NG-重复jQuery的转移效应 [英] Jquery Transfer effect in ng-repeat

问题描述

我试图转移的jQuery效果添加到循环中的动态图像。以下是我的code。

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?

感谢

推荐答案

之后做一些研究找到了解决办法。

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

这篇关于在NG-重复jQuery的转移效应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！