Question

我无法弄清楚如何使用特定数据属性定位元素。就我而言，a与class="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

Answer 1

$("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个<{1}}

具有特定数据属性的目标元素

1 个答案: