Question

我正在使用jQuery工具提示在鼠标悬停在文本链接上时显示图像（缩略图预览），如此处所示（https://jqueryui.com/tooltip/#custom-content）。

这本质上很好用，但目前每个链接在悬停时显示相同的图像。我想要的是每个链接上的工具提示显示该链接唯一的图像（有效预览链接的内容）。

*我对HTML和CSS有基本的了解，但JavaScript和jQuery我仍然在努力 - 所以任何帮助都非常感谢。

HTML

<div class="ui-widget photo">
  <div class="ui-widget-header ui-corner-all">
    <h1>
    <a href="/uploads/test1.jpeg" data-geo="">Test1.</a>
    <a href="/uploads/test2.jpeg" data-geo="">Test2.</a>
    <a href="/uploads/test3.jpeg" data-geo="">Test3.</a>
    </h1>
  </div>
</div>

的jQuery

  $( function() {
      $( document ).tooltip({
          items: "img, [data-geo], [title]",
          content: function() {
              var element = $( this );
              if ( element.is( "[data-geo]" ) ) {
                  var text = element.text();
                  return "<img class='map' alt='" + text +
                      "' src='/uploads/hello.jpeg'>";
              }
              if ( element.is( "[title]" ) ) {
                  return element.attr( "title" );
              }
              if ( element.is( "img" ) ) {
                  return element.attr( "alt" );
              }
          }
      });
  } );

如上所述，Test1，Test2和Test3在其工具提示中都会有独特的图像。

Answer 1

我认为你应该替换为：

$( function() {
      $( document ).tooltip({
          items: "img, [data-geo], [title]",
          content: function() {
              var element = $( this );
              if ( element.is( "[data-geo]" ) ) {
                  var text = element.text();
                  return "<img class='map' alt='" + text +
                      "' src='" + element.attr('href') + "'>";
              }
              if ( element.is( "[title]" ) ) {
                  return element.attr( "title" );
              }
              if ( element.is( "img" ) ) {
                  return element.attr( "alt" );
              }
          }
      });
  } );

Answer 2

if(element.is("[data-geo]")){
   var text = element.text();
   return `<img class='map' alt=${text} src='${element.attr('href')}'>`;
}

现在您使用固定图像 return "<img class='map' alt='"+text+"'src='/uploads/hello.jpeg'>"

您应该更改动态图片src。

多个jQuery工具提示具有不同的内容

2 个答案: