Question

这里我调用JavaScript函数将文本和图像附加到div，现在我想在2秒后隐藏。我怎么能这样做？

代码：

function showdiv(city, imagesrc, timeout) {

  window.setTimeout(function() {

    document.getElementById('city-order').innerHTML = "";
    document.getElementById('order-product').innerHTML = "";
    document.getElementById('product-list-display').style.display = "block";
    var order_placed_city = document.getElementById('city-order');
    var content = document.createTextNode(city);
    order_placed_city.appendChild(content);    
    var product_order = document.getElementById('order-product');
    var elem = document.createElement("img");
    product_order.appendChild(elem);
    elem.src = imagesrc;

  },timeout);

   document.getElementById('product-list-display').style.display = "none";

}

Answer 1

目前看到执行以下操作的代码：

on showDiv()：

隐藏#product-list-display
timeout之后 - ms附加一些内容

您可以在定时函数末尾添加另一个window.setTimeout来隐藏div。

function showdiv(city, imagesrc, timeout) {

  window.setTimeout(function() {
    /* ... */

    // You could add it here
    window.setTimeout(hideDiv)
  },timeout);

  /* ... */

}

然后添加另一个函数：

function hideDiv() {
    // Your hiding code here
}

我建议你看看像jQuery这样的框架。这样可以提高可读性并降低其复杂性。 https://jquery.com

Answer 2

这样的事情可能就是你在寻找什么？

function showdiv(city, imagesrc, timeout) {

    // Show div
    document.getElementById('city-order').innerHTML = "";
    document.getElementById('order-product').innerHTML = "";
    document.getElementById('product-list-display').style.display = "block";
    var order_placed_city = document.getElementById('city-order');
    var content = document.createTextNode(city);
    order_placed_city.appendChild(content);    
    var product_order = document.getElementById('order-product');
    var elem = document.createElement("img");
    product_order.appendChild(elem);
    elem.src = imagesrc;

  // Hide div after n milliseconds
  setTimeout(function() {
   document.getElementById('product-list-display').style.display = "none";      
  }, timeout);
}

Answer 3

如果您只想隐藏元素，请使用display：hidden;如果您希望它完全消失，则显示none：

function hideDiv(elementID,timeout) {
    window.setTimeout(function() {
        document.getElementById(elementID).style.display = "none";
    },timeout);
}

如何使用超时隐藏div？

3 个答案: