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

但是我无法理解如何将这两个内容组合在一起，以便我抓住标题并使用现有标题字段中的内容填充另一个字段（如title或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对象，因此您可以使用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将图像标题放在标题字段中

2 个答案: