Javascript 单击“更改链接中的文本”是否无效？

我试图在链接上实现的是单击文本，将其更改为第二个跨距；然而，这是行不通的

脚本

var reload = false;
$('#change').click(function() {
    reload = !reload;
    $('#change').click(function() {
    $('span',this).toggle();
    });
});

HTML

<li role="presentation" class="pull-right">
<a href="#" id="change">
<span>text 1</span><span style="display:none">text 2</span>
</a>
</li>

您已经用一个标志和嵌套事件处理程序将其复杂化，只需删除它，它就可以工作了

$（“#更改”）。单击（函数（）{
$（'span'，this.toggle（）；
});






$（“#更改”）。单击（函数（）{
$（'span'）.toggle（）；
});

但您并不需要jquery来实现这一点：

<li role="presentation" class="pull-right">
  <a href="#" id="change">
    <span>text 1</span>
    <span hidden>text 2</span>
  </a>
</li>

<script type="text/javascript">
function toggle () {
  document.getElementsByTagName('span').hidden = !document.getElementsByTagName('span').hidden;
}
document.getElementById('change').addEventListener('click', toggle);
</script>

函数切换（）{
document.getElementsByTagName（'span'）.hidden=！document.getElementsByTagName（'span'）.hidden；
}
document.getElementById（'change'）。addEventListener（'click'，toggle）；

<li role="presentation" class="pull-right">
  <a href="#" id="change">
    <span>text 1</span>
    <span hidden>text 2</span>
  </a>
</li>

<script type="text/javascript">
function toggle () {
  document.getElementsByTagName('span').hidden = !document.getElementsByTagName('span').hidden;
}
document.getElementById('change').addEventListener('click', toggle);
</script>