javascript 值在chrome控制台选项卡中可见但在代码中不可见

jaxagkaj  于 2023-03-28  发布在  Java
关注(0)|答案(2)|浏览(130)

在我的php文件中,我在一个按钮下面有一个span,而这个按钮又在一个td里面。
<td class="floating-td"><button class="count"><span id="compareCounts"><?php echo $listInfo; ?></span> </button></td>
在文件的末尾,当我试图通过ID获取span的值时,我没有得到任何东西。但是当我在Chrome控制台中检查时,我确实得到了那里的值。

jQuery(document).ready(($) => {
   var countVal = $('#compareCounts').text();
   // var countVal = document.getElementById("compareCounts").value;
   console.log("qwerty countVal bc-html: ", countVal);
}

如上所示,我尝试使用JS和jquery,在这两种情况下,我在运行代码时都没有得到值。尽管在Chrome的控制台选项卡中尝试$('#compareCounts').text();document.getElementById("compareCounts").value确实给予了值。
这里会有什么问题呢?

kkbh8khc

kkbh8khc1#

我想这会对你有帮助。我会尝试使用jquery加载和按钮点击如何获得值和控制台它。

$(function() {
  // button click get value and console
  $(".count").click(function() {
      $('#compareCounts').text();
      console.log("btn click get value and console: ", countVal);
  });  

  // first time on load get value and console
  var countVal = $('#compareCounts').text();
  console.log("on page load get value: ", countVal);      
});
<html>
<head>
  <title>Test Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
  <td class="floating-td">
    <button class="count">
      <span id="compareCounts">test</span>
    </button>
  </td>
</body>
</html>
bvn4nwqk

bvn4nwqk2#

如果你有多个动态值在那个时候对btn点击你可以得到跨度值

$(function() {
  $("button").click(function(e){
        var a = $.trim($(this).text());
      console.log(a);
  });
});
<html>
<head>
  <title>Test Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
  <td class="floating-td">
    <button class="count">
      <span>test</span>
    </button>
  </td>
    <td class="floating-td">
    <button class="count">
      <span>test1</span>
    </button>
  </td>
</body>
</html>

相关问题