Question

需要隐藏点击的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/

Answer 1

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

＆＃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;

Answer 2

做类似的事情，

＆＃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;

Answer 3

使用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>

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

3 个答案: