jQuery. Способ вывода значения атрибута в html при наведении

228

03 июля 2017, 18:41

<a href="www.tut.by">Ссылка 1</a>
<a href="www.lenta.ru">Ссылка 2</a>
<a href="www.rambler.ru">Ссылка 3</a>

При наведении на содержимое ссылки (к примеру, "Ссылка 1") она должна поменяться на значение атрибута href в круглых скобках (была "Ссылка 1", а стала "(www.tut.by)"). Максимум, до чего дошёл, :

$('a').on('mouseover',function(){
    $(this).html().attr('href');
})

Но он не работает...

Answer 1

Почти всё так. Только надо в html помещать значение атрибута, а ты делал get содержимого ссылки и потом get атрибута.

$('a').on('mouseover',function(){ 
    $(this).html($(this).attr('href')); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="www.tut.by">Ссылка 1</a> 
<a href="www.lenta.ru">Ссылка 2</a> 
<a href="www.rambler.ru">Ссылка 3</a>

типа toggle

$('a').on('mouseover', function() {   
  $(this).data('mouseleave', $(this).html()); 
  $(this).html($(this).attr('href')); 
}) 
 
$('a').on('mouseleave', function() {  
  $(this).html($(this).data('mouseleave')); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="www.tut.by">Ссылка 1</a> 
<a href="www.lenta.ru">Ссылка 2</a> 
<a href="www.rambler.ru">Ссылка 3</a>