鍍金池/ 問答/HTML/ js去除class方法。

js去除class方法。

請問怎么用js的方法去除10個(gè)div里的class名啊。
按照我這么寫沒用。我把settimeout放在（function(）{})（i））里面也沒有用。新人不懂。。求指點(diǎn)。我想做蘋果主頁那個(gè)按放大鏡背后一列消失的效果。
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>

</head>
<style type="text/css">

  div{
      width: 100px;
      height: 100px;
      display: inline-block;
      background: #eaf444
  }
  .a{
      box-sizing: border-box;
  }
  .border{
      border: 1px solid black
  }

</style>
<body>

<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<button id="btn">btn</button>

<script type="text/javascript">

  var btn = document.getElementById('btn');
  btn.onclick = function(){
       var a = document.getElementsByClassName('a');
       for(var i = 0 ; i < a.length;i++){
           a[i].setAttribute('class','a border');
           setTimeout(function(){
               a[i].setAttribute('class','a')
           },2000)
       }
  }

</script>
</body>
</html>

回答
編輯回答
清夢

(function (j) {

            a[j].setAttribute('class','a border');
            setTimeout(function(){
                a[j].setAttribute('class','a')
            },2000)
        })(i)
2017年6月9日 10:54
編輯回答
任她鬧

作用域的問題，for循環(huán)里面的i作用域在for循環(huán)外面，循環(huán)結(jié)束的時(shí)候i變成了a.length(就是10)，所以實(shí)際上你是運(yùn)行了10次

setTimeout(function(){
    a[10].setAttribute('class','a')
},2000)

解決方案前面都給了，加個(gè)閉包就好。

(function(i){
   setTimeout(function(){
       a[i].setAttribute('class','a')
   },2000)
})(i)

這個(gè)時(shí)候function里i的作用域就會被限制在function里，每次循環(huán)都是一個(gè)新的變量i，不會被for循環(huán)改變。

2017年3月11日 20:15
編輯回答
醉淸風(fēng)

作用域問閉包問題

(function(i){
   setTimeout(function(){
       a[i].setAttribute('class','a')
   },2000)
})(i)
2018年5月7日 14:09
編輯回答
臭榴蓮

經(jīng)典的閉包問題...

  var btn = document.getElementById('btn');
  btn.onclick = function(){
       var a = document.getElementsByClassName('a');
       for(var i = 0 ; i < a.length;i++){
           a[i].setAttribute('class','a border');
           (function fn(i) {
               setTimeout(function(){
                   a[i].setAttribute('class','a')
               },2000)
           })(i)
       }
  }
2017年1月29日 23:13
編輯回答
夏夕
(function(i){
     setTimeout(function(){
         a[i].setAttribute('class','a')
     },2000)
})(i)
2018年7月31日 05:52
編輯回答
夕顏
**直接拷貝我的過去**

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">

div{

  width: 100px;
  height: 100px;
  display: inline-block;
  background: #eaf444

}
.a{

  box-sizing: border-box;

}
.border{

  border: 1px solid black

}
</style>
<body>

<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<button id="btn">btn</button>
<script type="text/javascript">

var btn = document.getElementById('btn');
btn.onclick = function(){

   var a = document.getElementsByClassName('a');
   for(var i = 0 ; i < a.length;i++){
       a[i].setAttribute('class','a border');
       (function(i){
           setTimeout(function(){
               a[i].setAttribute('class','a')
           },2000)
        })(i)
   }

}
</script>
</body>
</html>

2018年8月26日 15:34
編輯回答
尐潴豬
setTimeout(function(i){
       a[i].setAttribute('class','a')
   },2000,i)
2017年8月8日 19:48