<img> атрибут заголовка для отображения в тегах <html>ниже <img>с использованием jquery - PullRequest
Новая
       1

<img> атрибут заголовка для отображения в тегах <html>ниже <img>с использованием jquery

1 голос
/ 28 января 2020

Я немного застрял.

Когда изображения добавляются в сообщение на моей странице, оно отображается так: 

<p>
  <img title="Some image title" src="img.jpg" alt="someALt" width="656" height="210" />
</p>

Мне удалось захватить title attribue с помощью Jquery и отобразить его под изображением так, как я хочу. 

var title = $('img').attr('title');
 $('img').after(title);

Моя проблема в том, что я хочу иметь возможность изменять текст, например, оборачивать его в теги <small> и изменять цвет и т. д. 1020 * через этот jquery фрагмент.

Я не уверен, как это сделать, я пытался добавить .append(), .html() и другие к $('img').after(title); без какого-либо результата.

Может ли кто-нибудь направить меня на правильный путь?

1 Ответ

3 голосов
/ 28 января 2020

Для этого вы можете предоставить функцию для after(), которая работает в области действия текущего элемента img. Таким образом, вы можете получить доступ к свойству title из ключевого слова this. Функция должна возвращать строку HTML для добавления в DOM, так что вы можете просто объединить любые элементы, которые вам нужны, в эту строку.

Преимущество этого заключается в том, что он будет работать для бесконечного числа img элементов без каких-либо изменений.

Обратите внимание, что в приведенном ниже примере я добавил селектор атрибутов, чтобы все выбранные элементы img имеют атрибут title для чтения.

После того, как это будет сделано, стилизация может быть выполнена извне из JS с помощью CSS. Попробуйте это: 

$('img[title]').after(function() {
  return `<small>${this.title}</small>`;
});
img + small {
  color: #C00;
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <img title="Some image title" src="img.jpg" alt="Some image alt" width="656" height="210" />
</p>
<p>
  <img title="foo bar" src="img.jpg" alt="foo bar alt" width="656" height="210" />
</p>
<p>
  <img title="fizz buzz" src="img.jpg" alt="fizz buzz alt" width="656" height="210" />
</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...