jQuery, чтобы поместить заголовок изображения в поле заголовка - PullRequest
Новая
       11

jQuery, чтобы поместить заголовок изображения в поле заголовка

0 голосов
/ 25 апреля 2018

Я начинающий кодер. Я хочу навести курсор мыши на изображение и показать информацию. В моих изображениях заполнено поле 'Подпись', и я хочу получить эти данные, чтобы перейти в заголовок или всплывающую подсказку.

Я делаю свой сайт с использованием 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>

Заранее спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

По вашему требованию я объединяю две функции вместе, а также 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>
0 голосов
/ 25 апреля 2018

Как упоминалось в Hikarunomemory, ваш this может не ссылаться на правильный элемент DOM. К счастью, каждая функция события получает доступ к объекту event автоматически, поэтому вы можете использовать event.target, чтобы получить ссылку на элемент DOM, который вызвал событие. Тогда вы можете получить подпись и использовать ее так, как хотите ... 

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