javascript - 如何将大量图像传递给 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 })
});
});

使用单个图像一切正常，但是如果我想不仅添加一个图像到 data-imgurl="Image-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="/image/qXxvn.png?s=64&g=1;/image/qXxvn.png?s=64&g=1" class="fiwTooltip">Tschallacka 2</a>

<a href="#" title="Enter Text Here" data-imgurl="/image/qXxvn.png?s=64&g=1" class="fiwTooltip">Tschallacka 1</a>

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