使用 jQuery 更改链接标题的问题

Question

我一直在尝试使用 JQuery 更改链接的标题。基本上，即使我键入 www.hotmail.com，我当前的主题也存在将某些内容识别为 URL 的问题。我想：

(1) 让它识别出它是指向 www.hotmail.com 的链接

(2) 将 www.hotmail.com 改名为 Click Here

我已尝试实现此线程中提到的内容，但未成功 (How do I change the title of a link using jQuery)。

单击后，我能够获得指向 www.hotmail.com 的链接，但文本并未更改为单击此处。

我的代码：

var href = jQuery('p.item-property').html();
var link = "<a href='"+href+"' target='_blank'>"+href+"</a>";

jQuery('p.item-property').replaceWith(link);

$('p.item-property').text('Click Here');

Answer 1

当您替换 p.item-property 时，它不再存在，因此文本不会更改。

我建议你使用jQuery(html, attributes) 创建元素，它可以很容易地操作。

var href = jQuery('p.item-property').html();

//Create element using jQuery
var link = $('<a>', {
  href: href,
  text: href //<== You can directly set here 'Click Here'
});

//Replace the element
jQuery('p.item-property').replaceWith(link);

//Update the text
link.text('Click Here');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="item-property">http://link.com</p>

Answer 2

您的选择器标识与您已替换为link 的元素相对应的元素。您想改为更改 link 的 text：

var href = jQuery('p.item-property').html();
var link = "<a href='"+href+"' target='_blank'>"+href+"</a>";

jQuery('p.item-property').replaceWith(link);

$(link).text('Click Here');

但最好在初始化时设置正确的text

var href = jQuery('p.item-property').html();
var link = "<a href='"+href+"' target='_blank'>Click Here</a>";

jQuery('p.item-property').replaceWith(link);