需要隐藏点击的div并在10秒后重新出现

时间:2016-11-08 11:15:07

标签: javascript

需要隐藏点击的div。

我在jsfiddle中尝试了一个例子。由于我是js的新手,我想要一个更好的解决方案。

<div class="t1">1</div>
<div class="t2">2</div>
<div class="t3">3</div>
<div class="t4">4</div>
<div class="t5">5</div>

https://jsfiddle.net/5Lh3yfov/

3 个答案:

答案 0 :(得分:3)

请找到下面添加的工作片段

&#13;
&#13;
$('body').on('click','.t11',function(){
    $(this).hide();
    var that = $(this);
    setTimeout(function() {
        that.show();
    }, 1000);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t1 t11">1</div>
<div class="t2 t11">2</div>
<div class="t3 t11">3</div>
<div class="t4 t11">4</div>
<div class="t5 t11">5</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

做类似的事情,

&#13;
&#13;
function hideAndShow(element, timeout){
  element.style.display = "none";
  setTimeout(function(){
      element.style.display = "block";
    },timeout);
}

hideAndShow(document.getElementById("myDiv"), 10000)
&#13;
div#myDiv{
  width:100px;
  background-color: #f00;
  height:100px;
  }
&#13;
<div id="myDiv">
  <div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

使用setTimeout()方法。

// get all div and iterate over them 
// for newer browser you can use Array.from 
// to convert NodeList to array
[].slice.call(document.querySelectorAll('.t')).forEach(function(e) {
  // attach event listener to the element
  e.addEventListener('click', function() {
    // hide the element
    this.style.display = 'none';
    // set timer
    setTimeout(function() {
      // show the element
      this.style.display = 'block';
      // bind the this context or you can use `e` 
    }.bind(this), 10000);
  })
});
<div class="t">1</div>
<div class="t">2</div>
<div class="t">3</div>
<div class="t">4</div>
<div class="t">5</div>