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 }) 
}); 
}); 

すべては、単一のイメージでうまく動作しますが、何であるか、私だけでなく、一枚の画像=「イメージ-URL」データimgurl を追加したい場合（私はユーザーアバターのコレクションを持っており、それらをすべて1つのツールチップに渡す必要があります）。問題を解決するにはどうしたらいいですか？

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>