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

Target element with certain data attribute

本文关键字：目标 元素 数据属性      更新时间：2023-09-26

我不知道如何针对具有特定数据属性的元素。在我的情况下，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适用于一个，但当你有多个js时，它适用于所有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

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

这将仅针对类别为.zoom-image且包含data-order-item-id 的a

相关文章：