3

На сайте есть ссылки с всплывающими подсказками, оформленные через атрибут title

Необходимо атрибут title заменить на атрибут data-yjsg-tip и добавить класс "yjsg-tip-top" самой ссылке.

Как сейчас:

<a href="http://site.ru" title="Текст подсказки">Текст ссылки</a>

Как нужно:

<a href="http://site.ru" class="yjsg-tip-top" data-yjsg-tip="Текст подсказки">Текст ссылки</a>

Если с добавление класса ссылке более-менее понятно (через addClass), то замена атрибута никак не получается, замена (replace) не срабатывает, а если удалить атрибут (removeAttr) и попытаться создать новый, то значения, уже присутствующие у атрибута title, теряются.

Это вообще возможно сделать? Если да, то как решение этой задачи оформить в виде скрипта?

2 ответа 2

6

$('a[title]').each(function() {
  if (this.title) {
    $(this).addClass('yjsg-tip-top').attr('data-yjsg-tip', this.title);
    $(this).removeAttr('title'); // если нужно удалить title
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://site.ru" title="Текст подсказки">Ссылка с title</a><br />
<a href="http://site.ru" title="">Ссылка с пустым title</a><br />
<a href="http://site.ru">Ссылка без title</a>

5
  • Большое спасибо, все работает, то что нужно! и да сам атрибут title после изъятия из него значения за ненадобностью удаляем, как и предусмотрено у вас в ответе!
    – Slava
    Commented 16 июл. 2017 в 21:49
  • Дальше-больше, а подскажите еще пожалуйста: как сделать чтобы скрипт не срабатывал если значение title пустое или отсутствует? А то сейчас красиво оформленные подсказки всплывают даже там, где title отсутствует или не прописан т.е. пустые )
    – Slava
    Commented 16 июл. 2017 в 22:24
  • @Slava обновил ответ
    – Cheg
    Commented 16 июл. 2017 в 22:28
  • Еще раз большое спасибо, все работает, и последнее, если я в скрипте через запятую перечислю список div в которых должно срабатывать правило, насколько это правильно? Или нужно для каждого div отдельно правило прописывать (дублировать код). Что меньше создает нагрузку?
    – Slava
    Commented 16 июл. 2017 в 22:40
  • 1
    @Slava можете просто писать $('.selector, .selector1, #selector2')
    – Cheg
    Commented 16 июл. 2017 в 22:43
1

Вот пример, возможно это подойдет

$("a").attr("data-yjsg-tip", "Текст подсказки");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a>

1
  • К сожалению нет, этот вариант не подходит по причине того, что подсказки в title уже присутствуют.. вот мне и нужно title заменить на data-yjsg-tip Этот вариант бы подошел, если бы взять значение атрибута title (текст подсказки), и добавить это значение к новому/создаваемому атрибуту data-yjsg-tip, а после этого сам атрибут title (вместе со значением) удалить.. Но как это реализовать не хватает знаний..
    – Slava
    Commented 16 июл. 2017 в 21:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.