如何從WordPress中的函數獲取數據屬性的值，並將其放入jQuery中的變量中？

Question

我有一個WordPress功能，覆蓋原生的WordPress圖庫。我在該函數中添加了 tooltipster.js，但我想獲取data-image屬性的值以獲取url，然後將其放入tooltipster初始化中。

與我的代碼，工具提示工作，但它沒有得到圖像的網址。

我有一個WordPress的代碼，裏面的functions.php這樣的：

<li> <a class="tooltip" data-image="<?php echo $attachment_img_url; ?>"> <?php echo wp_get_attachment_image($attachment->ID, 'thumbnail'); ?></a> </li> 

和tooltipster初始化這裏面footer.php：

$(document).ready(function() { 
    var imgUrl = $(this).data('image'); 

    $('.tooltip').tooltipster({ 
     content: $('<span><img src="' + imgUrl + '" /></span>') 
     }); 
}); 

Answer 1

根據您可以使用tooltipster文檔方法functionBefore在顯示工具提示之前運行一個函數。該函數的第一個參數是origin或者用於打開工具提示的元素。知道這一點，您可以使用origin.data('image')來獲取data-image的數據，並將其設置爲origin.tooltipster('content', origin.data('image'));的工具提示內容。

$('.tooltip').tooltipster({ 
    content: 'Loading...', 
    functionBefore: function(origin, continueTooltip) { 
     continueTooltip(); 
     origin.tooltipster('content', origin.data('image')); 
    } 
}); 

DEMO