Question

我正在尝试在点击元素时更改锚点（<a href=>）的文本。

html结构是：

<h1>
  <a href="">
      change this text
      <span class="breadcrumb">Do not change this text</span>
  </a> 
</h1>

Jquery的：

var clickedtext = 'Different Text for A href';
$('h1 a').not('span.breadcrumb').text(clickedtext);

但出于某种原因，它删除了<a href>下的所有内容并放置了该文字。

非常感谢任何帮助。

Answer 1

如果使用节点，则可以直接分配文本。

＆＃13;

$("a").click(function (e) {
  e.preventDefault();
  $(this).contents().get(0).nodeValue = "new a href text"
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a href="">change this text<span class="breadcrumb">Do not change this text</span></a> </h1>

＆＃13;

Answer 2

你可以复制元素并稍后追加

var bread = $('h1 a').find('.breadcrumb').clone();
$('h1 a').text("cour text").append(bread);

Answer 3

您可以将该span元素保存在变量中，然后更改a的文字并追加span。

var clickedtext = 'Different Text for A href. ';
var a = $("h1 a"), span = a.find('span')

a.click(function() {
  a.text(clickedtext).append(span)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a href="#">change this text. <span class="breadcrumb">Do not change this text</span></a> </h1>

Answer 4

这是怎么做的：

＆＃13;

var clickedtext = 'Different Text for A href';
document.getElementById("toChange").innerText = clickedtext;

＆＃13;

<h1>
  <a href="">
    <span id="toChange">change this text</span>
    <span class="breadcrumb">Do not change this text</span>
  </a>
</h1>

＆＃13;

单击更改锚文本但不跨度

4 个答案: