jQuery将图像标题放在标题字段中

Question

我是新手编码员。我想将鼠标悬停在图像上并显示信息。我的图像填充了“标题”字段，我想抓取该数据以移动到标题或数据工具提示中。

我正在使用 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'));
});

但我无法理解如何将这两件事结合起来，以便我抓住标题并用我现有的标题字段中的内容填充另一个字段（如标题或数据工具提示）。

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

<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

根据您的要求，我将两个功能结合在一起，当鼠标离开图像时，我还结合了 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>

Answer 2

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

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