0

我不知道如何定位具有特定数据属性的元素。就我而言，awithclass="zoom-image"和data-order-item-id="<?=$order_item_id ?>".

html/php 如下（此代码在循环中，将重复多次）：

 <div class="history_image">
     <img src="<?= $order_image ?>" alt="Image of product">
     <a href="javascript:void(0)" class="zoom-image" data-order-item-id="<?=$order_item_id ?>">
         <span class="trans_top"><?= lang('view')?></span>
         <span class="trans_bottom"></span>
     </a>
      <div id="zoom-image-holder-<?=$order_item_id ?>" class="zoom-image-holder hidden">
          <img src="<?= $order_image_full?>" alt="Image of product">
      </div>
 </div>

我的 js 适用于一个，但是当您有多个时，它适用于所有。我只需要定位a悬停的那个并将其data-order-item-id="<?=$order_item_id ?>用作参考点（我认为）。js 所做的基本上是添加淡入淡出，并对一些链接进行动画处理：

function hoverFadeIn()
{
    zoomId = $(this).data("order-item-id");
    var holderHeight = ($(this).height());
    var transRatio = 0.7;
    transValue = holderHeight * transRatio;
    transValueTop = transValue+'px';
    transValueBottom = '-'+transValue+'px';

    $(this).animate({
        backgroundColor: 'rgba(0,0,0,0.6)',
        }, 300, function() {
        // Animation complete.
     });
     $('.trans_top').animate({
        transform: 'translateY('+transValueTop+')'
      });
     $('.trans_bottom').animate({
        transform: 'translateY('+transValueBottom+')'
      });
}
function hoverFadeOut()
{
    $(this).animate({
         backgroundColor: 'rgba(0,0,0,0)',
        }, 300, function() {
        // Animation complete.
     });
     $('.trans_top').animate({
        transform: 'translateY(0px)'
      });
     $('.trans_bottom').animate({
        transform: 'translateY(0px)'
      });
}

$(document).ready(function() {
   var zoomId = 0 ;
   $(".zoom-image").click(function() {
        zoomId = $(this).data("order-item-id");
        $("#zoom-image-holder-"+zoomId).dialog(opt).dialog("open");
    });
    $(".ui-widget-overlay").live("click", function() {  $("#zoom-image-holder-"+zoomId).dialog("close"); } );
    $(".zoom-image").hoverIntent( hoverFadeIn, hoverFadeOut );     
});

我确信它$(this).animate需要改变并且也只适用 

$('.trans_top').animate({
        transform: 'translateY('+transValueTop+')'
      });
     $('.trans_bottom').animate({
        transform: 'translateY('+transValueBottom+')'
      });

到当前 div 被悬停

4

1 回答 1

0 
$("a[data-order-item-id].zoom-image").click(function () {
    zoomId = $(this).data("order-item-id");
    $("#zoom-image-holder-" + zoomId).dialog(opt).dialog("open");
});

这将只a针对类.zoom-image并且包含data-order-item-id

于 2013-07-26T08:43:26.643 回答