具有某些數據屬性的目標元素

我無法確定如何使用某個數據屬性來定位元素。在我的情況下，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

具有某些數據屬性的目標元素

回答

相關問題