Включение / отключение заголовка из ссылки при изменении размера окна браузера

#jquery #html

#jquery #HTML

Вопрос:

У меня есть ссылка, подобная этой:

 <a id="mylink" href="something" title="something">something</a>
  

Используя jQuery, как я могу удалить title атрибут в зависимости от ширины сайта?

 if (Window.width > 460) {
   // disable title of mylink
}
  

Другими словами, когда экран> 460 пикселей, тогда title ссылки не нужно отображать, а когда <= 460 пикселей, тогда title ссылки должны отображаться.
Спасибо.

Комментарии:

1. Могу я спросить, почему вы чувствуете необходимость это делать? Я бы предположил, что вы ожидаете, что это будет работать с библиотекой, но очень маловероятно, что удаление атрибута после создания экземпляра библиотеки будет иметь какой-либо эффект, поскольку они читаются только при загрузке.

2. конечно, у меня есть меню. когда размер экрана < 460, я отображаю это меню в виде списка глав. Когда оно> 460, я отображаю слишком полный текст этого и поэтому заголовок не нужен. Это необходимо, когда я показываю его без полного текста.

Ответ №1:

Вы можете добавить ссылку на заголовок внутри атрибута данных, а затем при загрузке документа и изменении размера окон проверить размер окна и установить атрибут title или удалить его

 $(document).ready(function(){
  setLinkTitle();
  $(window).resize(function(){
    setLinkTitle();
  })
})

function setLinkTitle(){
  if($(window).width() <= 460){
    $(".mylink").removeAttr("title");
  }
  else{
    $(".mylink").each(function(){
       $(this).attr("title",$(this).data("title"))
    })
  }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="mylink" title="something" data-title="something">something</a>  

Комментарии:

1. Это работает, но не понимаю, почему не работает, если <a></a> помещается внутри <div> …<li> …. <a class=»mylink»></a> </li></div> Нужно изменить код?