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

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

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

我可以成功地获得图像标题，并将其显示在图像下方，如下所示：

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

jQuery（'.semplice lightbox'）.find（'.lightbox项'）.wrap（'.after）（函数（）{
返回jQuery（“”）.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>

---

提前感谢您的帮助。

正如Hikarunomemory提到的，您的

此

可能没有引用正确的DOM元素。幸运的是，每个事件函数都可以自动访问

事件

对象，因此您可以使用

event.target

获取对触发事件的DOM元素的引用。然后你可以得到它的标题，并使用它，无论你想

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

---

根据您的要求，我将两个功能组合在一起，并在鼠标离开图像时删除

jQuery（'.semplice lightbox'）.hover（函数（）{
var$this=jQuery（this）//这里指的是.semplice lightbox
$this.css（'cursor'，'pointer'）.find（'.lightbox item'）.wrap（''）.after（function（）{
var imageCaption=jQuery（this）.attr（'caption'）//这里指的是.lightbox项
$this.attr（'title'，imageCaption）
返回jQuery（“”）.text（imageCaption）；
});
}，函数（）{
jQuery（this）.css（'cursor'，'auto'）.find（'p'）.remove（）；
});

我猜
$（'.semplice lightbox'）
是图像的容器，对吗？是的，那就是图像容器。所以
这个
这里不指图像，这意味着你不能从
这个
中获取
标题
。为什么每个图像上都没有
title=“
属性？为什么需要jQuery来完成这项工作？你能发布示例HTML吗？谢谢你的回复。我在Wordpress主题CMS（Semplice）中工作，所以我的编辑能力受到限制。我可以将CSS和JavaScript注入到我现有的代码中，但除此之外，我无法修改任何内容。我将用更多的文字编辑我的问题，试图更好地解释谢谢你的帮助，我很高兴在阅读这篇文章时学到了一些东西！非常感谢您花时间写下这篇关于Hikaruno的记忆。我会做更多的修改，并根据需要提出更多的问题。