问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js去除class方法。

头像
康王
    3221121

    请问怎么用js的方法去除10个div里的class名啊。
    按照我这么写没用。我把settimeout放在（function(）{})（i））里面也没有用。新人不懂。。求指点。我想做苹果主页那个按放大镜背后一列消失的效果。
    <!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>

    javascriptcsshtml
    阅读 8.2k
    7 个回答
    得票最新
    头像
    wlove
      6.9k3835
      ✓ 已被采纳
      **直接拷贝我的过去**

      <!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>

      头像
      兔子饿了
        1.3k1311

        作用域的问题，for循环里面的i作用域在for循环外面，循环结束的时候i变成了a.length(就是10)，所以实际上你是运行了10次

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

        解决方案前面都给了，加个闭包就好。

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

        这个时候function里i的作用域就会被限制在function里，每次循环都是一个新的变量i，不会被for循环改变。

        头像
        李十三
          13.6k31929
          setTimeout(function(i){
       a[i].setAttribute('class','a')
   },2000,i)
          头像
          Reachel
            2.6k1114
            (function(i){
     setTimeout(function(){
         a[i].setAttribute('class','a')
     },2000)
})(i)
            头像
            faima
              900119

              作用域问闭包问题

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

                (function (j) {

                            a[j].setAttribute('class','a border');
            setTimeout(function(){
                a[j].setAttribute('class','a')
            },2000)
        })(i)
                头像
                呱呱呱
                  646211

                  经典的闭包问题...

                    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)
       }
  }
                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题