如何重新加载特定的div

Question

我的container div 中有countdown，但是当我尝试重新加载特定的container 时，它的重新加载完美但我的countdown 没有出现，而且按钮也被禁用..

function refreshDiv() {
  $('.container').load(window.location.href + " .container >*");
}

javascript

var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");

var count = 2; // Set count
var timer = null; // For referencing the timer

(function countDown() {
  // Display counter and start counting down
  spn.textContent = count;

  // Run the function again every second if the count is not zero
  if (count !== 0) {
    timer = setTimeout(countDown, 1000);
    count--; // decrease the timer
  } else {
    // Enable the button
    btn.removeAttribute("disabled");
  }
}());

这是html

<div class="container">

    <h2>choose product </h2>
    <input type="file" name="inpFile" id="inpFile">

    <div class="image-preview" id="imagePreview">
      <img src="" alt="Image Preview" id="zoom" class="image- 
           preview__image">
      <span class="image-preview__default-text">choose image</span>

    </div>
  </div>

  <div class="container2">
    <h4 id="title">here</h4>
    <div class="controls">
      <div class="main-controls">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>File <span id="count"></span></button>
          <div class="dropdown-menu">
            <button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">Save</button>

Answer 1

那里发生了很多没有多大意义的事情。不过，其中大部分是错误的术语而不是错误的代码。

您的 countDown 函数做了 3 件事（这很好），

• 它将计数器增加到下一个值，
• 更新计数器显示，并
• 它会自行重启（超时后）

（再次，很好）；但是它在中执行这些操作的顺序非常奇怪：在修改显示显示的值之前，您更新了视觉显示。换句话说，您的显示不准确。

---

“也许控制台工作正常。”不知道这意味着什么，甚至与它有什么关系。

---

refreshDiv() & "..当我刷新整个页面但是当我刷新#container3.."

你不刷新 <div>s，你更新它们。 您对该概念使用错误的语言这一事实​​导致 你认为完全不相关的东西（刷新浏览器）在某种程度上相似或相关。

---

<div class="container2" id="container3"> 忍不住想知道 #container3 和 .container2 类背后的逻辑是什么；但在继承该代码的人必须支付他的精神科医生的费用之前，它不会真正引起问题。

---

最简单的解决方法可能是这样的：

var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");

var count = 3; // Set counter (+ add 1 second)
var timer = null; // For referencing the timer

(function countDown() {
    // decrease the counter (but never below zero)
    count = ( --count > 0 ? count : 0 );

    if (count > 0) {
        // Run the function again every second if the count is not zero
        timer = setTimeout(countDown, 1000);
    } else {
        // Enable the button
        btn.removeAttribute("disabled");
    }

    // Display counter
    spn.textContent = count;
}());