单击更改链接中的文本无效

Onclick change text in a link not working?

本文关键字：文本 无效 链接 单击      更新时间：2023-09-26

我试图在链接上实现的目标单击文本更改到第二个span；然而，这并不奏效。

脚本

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>

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

$('#change').click(function() {
    $('span', this).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li role="presentation" class="pull-right">
        <a href="#" id="change">
            <span>text 1</span><span style="display:none">text 2</span>
        </a>
    </li>
</ul>

当您将事件处理程序嵌套在彼此内部时，每次单击时都会绑定新的事件处理程序，它们会不断相互抵消，这将无法按预期工作
这就是为什么您通常不应该嵌套事件处理程序。

<li role="presentation" class="pull-right">
  <a href="#" id="change">
    <span>text 1</span><span style="display:none">text 2</span>
  </a>
</li>
<script type="text/javascript">
$('#change').click(function() {
  $('span').toggle();
});
</script>

但你并不真的需要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>
相关文章：