具有某些数据属性的目标元素

我无法确定如何使用某个数据属性来定位元素。在我的情况下，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徘徊

来源

2013-07-26 Richy

您是否正在检查'data-order-item-id'属性的存在或属性的特定值 –

我想我需要检查一个特定的值。我得到并设置数据值为“zoomId = $（this）.data（”order-item-id“）;” 所以我需要然后将这个函数hoverFadeIn和hoverFadeOut应用到这个数据订单项目id与“zoomid” – Richy

$("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-26 08:43:26 Spokey

谢谢你。点击功能是好的，我想，因为这得到了zoomId = $（this）.data（“order-item-id”）;我的问题是在 $（“。zoom-image”）。hoverIntent（hoverFadeIn，hoverFadeOut）;我的问题是在 $（“。zoom-image”）。并且这些函数被应用于所有添加了.zoom的a。 – Richy

具有某些数据属性的目标元素

回答

相关问题