リンクのOnclickチェンジテキストが機能していませんか？

Question

私がリンク上で達成しようとしているのは、テキストを第2のスパンに変更することです。しかし、これは動作していません。

スクリプト

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

あなたはちょうどそれを削除し、フラグとネストされたイベントハンドラでそれを複雑なのだが、

$('#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>

の作品

イベントハンドラを相互にネストすると、クリックごとに新しいイベントハンドラがバインドされ、互いに干渉し続けるため、期待どおりに動作しません。
これは、イベントハンドラをネストしないようにする理由です。

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>