Question

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

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

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

由于

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

在ng-repeat中的Jquery传递效应

1 个答案: