jQuery 将图片说明放在标题字段中

Question

我是一名编码新手。我想将鼠标悬停在图像上并显示信息。我的图像填充了 'Caption' 字段，我想获取该数据以移动到标题或 data-tooltip 中。

我正在使用 Semplice 做我的网站，所以它是一个 Wordpress CMS，我可以更改的代码有限。我能够注入自定义 CSS（全局和每个页面）和 JavaScript（全局）

我可以像这样在悬停时成功显示预写文本：

jQuery('.semplice-lightbox').hover(function() {
        jQuery(this).css('cursor','pointer').attr('title', 'CUSTOM TEXT');
    }, function() {
        jQuery(this).css('cursor','auto');
    });

而且我可以成功获取图像标题并将它们显示在图像下方，如下所示：

jQuery('.semplice-lightbox').find('.lightbox-item').wrap('<div>').after(function() {
    return jQuery('<p>').text(jQuery(this).attr('caption'));
});

但我无法理解如何将这两件事结合起来，以便我获取标题并使用现有标题字段中的内容填充另一个字段（如标题或 data-tooltip）。

如果有帮助，这里是检查所有这些东西所在的盒子的数据：

<a class="semplice-lightbox"><img class="is-content lightbox-item" src="https://my-website.nfshost.com/wp-content/uploads/2018/04/the-image-filename.jpg" width="1067" height="1600" alt="Alt text" caption="Caption field" data-width="original" data-scaling="no" data-photoswipe-index="0"></a>

在此先感谢您的帮助。

Answer 1

正如 Hikarunomemory 提到的，您的 this 可能没有引用正确的 DOM 元素。幸运的是，每个事件函数都可以自动访问 event object，因此您可以使用 event.target 来获取对触发事件的 DOM 元素的引用。然后你就可以得到它的标题，并根据需要使用它......

$('.semplice-lightbox').hover(function(event){
    var caption = $(event.target).attr('caption'); 
    $(event.target).attr('title', caption);
});

Answer 2

根据您的要求，我将两个功能组合在一起，并且 remove() 当鼠标离开图像时 <p>。

jQuery('.semplice-lightbox').hover(function() {
  var $this = jQuery(this) // this here refers to .semplice-lightbox
  $this.css('cursor', 'pointer').find('.lightbox-item').wrap('<div>').after(function() {
    var imageCaption = jQuery(this).attr('caption') // this here refers to .lightbox-item
    $this.attr('title', imageCaption)
    return jQuery('<p>').text(imageCaption);
  });
}, function() {
  jQuery(this).css('cursor', 'auto').find('p').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="semplice-lightbox">
  <img class="is-content lightbox-item" src="https://my-website.nfshost.com/wp-content/uploads/2018/04/the-image-filename.jpg" width="1067" height="1600" alt="Alt text" caption="Caption field" data-width="original" data-scaling="no" data-photoswipe-index="0">
</a>

jQuery 将图片说明放在标题字段中

jQuery to put image caption in title field

jquery

attr