Question

我想知道是否有人可以向我解释这里发生了什么？

＆＃13;

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

＆＃13;

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

＆＃13;

我很奇怪为什么在您点击使用此方法时不会更新列表项。但是，如果您将javascript更改为;

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

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

它将值显示为一个，但将以下内容设置为;

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

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

  console.log(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

在你的第一个代码中，testNo是全局设置的，并且在第二个和第三个页面加载时取值，它是在本地设置的，所以每个点击事件的值都会改变，

在第二个值中，值在文本更改之前递增，因此它捕获先前更改的值，保存文本后第3个值保存，因此testNo显示更新的值

Answer 3

所有关于何时获得$('#test').text()的价值 - 因为然后您继续更改源值。

您的代码执行两项操作：（1）它读取#test并将其值存储为testNo，（2）它从单击的锚标记中获取文本并将该值放入#test。所以有两件事情发生了变化：var testNo和#test。

如果将#test的值保存为var testNo，则在显示testNo之前更改#test的值，它们将具有不同的值。

我认为你想要做的是：

＆＃13;

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

＆＃13;

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

＆＃13;

文本未使用jQuery按预期更新

3 个答案: