时间戳

首页 > 解决方案 > jQuery将图像标题放在标题字段中

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

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

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

<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>

提前感谢您的帮助。

标签： jqueryattr

解决方案

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

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

推荐阅读