Question

我想在链接上实现的目标点击文本更改为第二个范围;但这不起作用。

脚本

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>

Answer 1

您已经使用标记和嵌套事件处理程序对其进行了复杂化，只需将其删除即可使用

＆＃13;

$('#change').click(function() {
    $('span', this).toggle();
});

＆＃13;

<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>

＆＃13;

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

Answer 2

<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>

Onclick更改链接中的文本不起作用？

2 个答案: