如何將很多圖像傳遞給jQuery UI工具提示

Question

我正在使用jQuery UI工具提示。這是一個用法。

<a href="#" title="Enter Text Here" data-imgurl="Image-URL" class="fiwTooltip">Aumkar Thakur</a> 

這裏是JS文件

$(document).ready(function() { 
$('.fiwTooltip').hover(function(){ 
     var title = $(this).attr('title'); //Getting Title Text 
     var imgurl = $(this).attr('data-imgurl'); // Getting Image URL 
     $(this).data('tipText', title).removeAttr('title'); 
    $('<div class="tooltip"><p class="txttooltip">'+title+'</p><img src="'+imgurl+'" class="imgtooltip"/>') 
     .appendTo('body') 
     .fadeIn('slow'); 
}, function() { 
     $(this).attr('title', $(this).data('tipText')); 
     $('.tooltip').remove(); 
}).mousemove(function(e) { 
     var mousex = e.pageX + 20; //Get X coordinates 
     var mousey = e.pageY + 10; //Get Y coordinates 
     $('.tooltip') 
     .css({ top: mousey, left: mousex }) 
}); 
}); 

一切正常，用單個圖像，但如果我想不僅增加一個圖像數據imgUrl的=「圖片的URL」（我有收集用戶頭像，我需要將它們全部傳遞給一個工具提示）。我如何解決我的問題？

Answer 1

首先，學會使用參考。 搜索一個對象一次，然後使用該引用。它加速了你的腳本並使手機變得不那麼熱。

我假設圖片將被分隔;因此，下面的腳本，基於你的腳本。

$(document).ready(function() { 
 
$('.fiwTooltip').hover(function(){ 
 
     var $this = $(this); 
 
     var title = $this.attr('title'); //Getting Title Text 
 
     var imgurl = $this.attr('data-imgurl'); // Getting Image URL 
 
    
 
     $this.data('tipText', title).removeAttr('title'); 
 
     var $img = $('<img class="imgtooltip">'); 
 
     var $text = $('<p class="txttooltip"></p>'); 
 
     $text.text(title); 
 
     var $tooltip = $('<div class="tooltip"></div>'); 
 
     $tooltip.append($text); 
 
     
 
     var split = imgurl.split(';'); 
 
    
 
     for(var c=0;c<split.length;c++) { 
 
      var clone = $img.clone(); 
 
      clone.attr('src',split[c]); 
 
      $tooltip.append(clone); 
 
     } 
 
    
 
     $tooltip.appendTo('body').fadeIn('slow'); 
 
}, function() { 
 
     var $this = $(this); 
 
     $this.attr('title', $this.data('tipText')); 
 
     
 
     $('.tooltip').remove(); 
 
}).mousemove(function(e) { 
 
     var mousex = e.pageX + 20; //Get X coordinates 
 
     var mousey = e.pageY + 10; //Get Y coordinates 
 
     $('.tooltip') 
 
     .css({ top: mousey, left: mousex }) 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" title="Enter Text Here" data-imgurl="https://i.stack.imgur.com/qXxvn.png?s=64&g=1;https://i.stack.imgur.com/qXxvn.png?s=64&g=1" class="fiwTooltip">Tschallacka 2</a> 
 

 
<a href="#" title="Enter Text Here" data-imgurl="https://i.stack.imgur.com/qXxvn.png?s=64&g=1" class="fiwTooltip">Tschallacka 1</a> 
 

 
<a href="#" title="Enter Text Here" data-imgurl="https://i.stack.imgur.com/qXxvn.png?s=64&g=1;https://i.stack.imgur.com/qXxvn.png?s=64&g=1;https://i.stack.imgur.com/qXxvn.png?s=64&g=1" class="fiwTooltip">Tschallacka 3</a>