jQueryを使用してテキストが期待通りに更新されない

Question

ここで何が起こっているのか誰かが私に説明することができますか？

var testNo = $("#test").text() 
 

 
$("ul li a").click(function() { 
 
    $("#test").text($(this).text()); 
 
    console.log(testNo) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
     <li> 
 
     <a href="#" id="test">1</a> 
 
     <ul> 
 
      <li> 
 
      <a href="#" >1</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">2</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" >3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul>

あなたは、このメソッドを使用してクリックすると、これはリストの項目を更新しないと、なぜそれは私には不思議です。しかし、あなたがjavascriptを変更した場合、

$("ul li a").click(function() { 
    var testNo = $("#test").text() 

    $("#test").text($(this).text()); 
    console.log(testNo) 
}) 

値は1つ後ろに表示されますが、次のように設定されます。

$("ul li a").click(function() { 

    $("#test").text($(this).text()); 
    var testNo = $("#test").text() 

    console.log(testNo) 
}) 

となります。

この最後のコードスニペットが私に与えていることを達成する方法はありますか？しかし、最初のコードフォーマットを使用することで達成できますか？

は私が何かがあなたがtestNo変数テキストを更新する必要が

おかげ

Answer 1

は、その後、唯一のそれは、最新のテキストが表示されます、意味がありません知ってみましょう。試してみてください：あなたの最初のコードtestNoで

var testNo = $("#test").text() 
 

 
$("ul li a").click(function() { 
 
    testNo = $(this).text(); 
 
    $("#test").text($(this).text()); 
 
    console.log(testNo) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#" id="test">1</a> 
 
    <ul> 
 
     <li> 
 
     <a href="#" >1</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">2</a> 
 
     </li> 
 
     <li> 
 
     <a href="#" >3</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

がグローバルに設定されており、それがローカルに設定された第2および第3回では、ページの読み込み時の値をとるので、各クリックイベントでの値の変化、

で2番目の値は、テキストが変更される前にインクリメントされて前の変更された値を取得します.3番目にテキストが保存された後に値が保存されるので、testNoは更新された値を表示します。

Answer 3

$('#test').text() - 理由次にソース値を変更します。

あなたのコードは#testを読み取り、その値をtestNoとして保存します。（2）クリックされたアンカータグからテキストを取得し、その値を#testに入れます。つまり、var testNoと#testという2つの点が変わります。

#testの値をvar testNoとして保存してから、testNoを表示する前に#testの値を変更すると、値が異なります。

私は何がやりたいことは、このだと思う：それは* *リストの項目を更新しない

$("ul li a").click(function() { 
 
    var testNo = $(this).text() 
 
    $("#test").text(testNo); 
 
    console.log(testNo) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
     <li> 
 
     <a href="#" id="test">1</a> 
 
     <ul> 
 
      <li> 
 
      <a href="#" >1</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">2</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" >3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul>