Измените div на ссылку href при наведении курсора и щелкните, используя jQuery

Question

Div с атрибутом url-адреса данных необходимо заменить ссылкой. Ссылка должна получать атрибут data-url из div. Тем не менее, это должно происходить только при наведении курсора мыши или щелчке. Пробовал примерно так:

<script>

$(".thelink").on('click mouseover', function(){

replaceWith("<a href=\"here data-url\">The Title</a>");

});

Такое возможно? Большое спасибо за ваше время и усилия.

Answer 1

Вот как вы это делаете:

$(".thelink").on('click mouseover', function(){
   let dataURL = $(this).data('url');
   $(this).replaceWith(`<a href="${dataURL}">The Title</a>`);
});

Но если вам нужно просто открыть URL-адрес при нажатии на div, вы можете сделать это следующим образом:

$(".thelink").on('click', function(){
   window.location.href = $(this).data('url');
});

Answer 2

Вы можете использовать делегирование событий для динамически добавляемого элемента и использовать mouseover, чтобы добавить a, а на mouseout он снова добавит div.

Нам также нужно использовать class в нашем элементе a href, чтобы мы могли использовать то же самое для mouseout, чтобы вернуть исходный div

Demo

//Mouse over function
$(document).on('mouseover click', '.thelink', function() {
  $(this).replaceWith($('<a class="newLink">').text($(this).text()).attr("href", $(this).data("url")));
});

//Mouse out function
$(document).on('mouseout click', '.newLink', function() {
  $(this).replaceWith($('<div class="thelink">').text($(this).text()).attr("data-url", $(this).attr("href")));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thelink" data-url="https://www.example.com">The Title</div>