使用jQuery时文本没有按预期更新

Text not updating as expected using jQuery

本文关键字：更新 jQuery 文本 使用      更新时间：2023-09-26

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

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变量文本，然后只有它会显示最新的文本。试一试:

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>

这都是关于您何时获得$('#test').text()的值—因为您随后将继续更改源值。

代码做两件事:(1)它读取#test并将其值存储为testNo，(2)它从单击的锚标记中获取文本并将该值放入#test。所以有两件事改变了:var testNo和#test.

如果你把#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>

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

在第二行中，值是在文本更改之前递增的所以它捕获了之前更改过的值，第三行是在文本保存之后保存值testNo显示更新后的值

相关文章：