Question

我试着写一个程序来练习我的js技能。有3个球，它们最初是隐藏的。我希望ball_1首先出现，1秒后，ball_1消失。接着，ball_2出现，1秒后消失;与ball_3相同的逻辑。当我运行我的代码时，前两个球不会隐藏。我不确定出了什么问题。下面的代码是我写的html，css和js代码。希望有人可以帮助我。先感谢您。

$("#next").click(function() {
  var getIndex =$("select option:selected").index();
  var index=getIndex+1;
   $("select").children().removeAttr('selected');
   $("select").children().eq(index).attr('selected', 'selected');
});

$(document).ready(function() {
  var notes = ['ball_1', 'ball_2', 'ball_3'];
  for (i = notes.length; i > 0; i--) {
    var note = notes.shift();
    $('#' + note).addClass('shown');
    setTimeout(function() {
      $('#' + note).removeClass('shown');
    }, 1000);
  }
});

#ball_1 {
  width: 10px;
  height: 10px;
  background: #000000;
  border: 2px solid #ccc;
  border-radius: 50%;
}
#ball_2 {
  width: 10px;
  height: 10px;
  background: #0000FF;
  border: 2px solid #ccc;
  border-radius: 50%;
}
#ball_3 {
  width: 10px;
  height: 10px;
  background: #7FFF00;
  border: 2px solid #ccc;
  border-radius: 50%;
}
#ball_1,
#ball_2,
#ball_3 {
  width: 10px;
  height: 10px;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.not_shown {
  display: none;
}
.shown {
  display: block;
}

Answer 1

通常，在使用for循环进行迭代时，永远不要修改数组。 shift方法将从数组中删除第一项，从而修改它的长度。而是这样做：

$(document).ready(function() {
  var notes = ['ball_1','ball_2','ball_3'];
  var i; // You were declaring "i" in global namespace before.  Don't do that.
  for(i = 0; i < notes.length; i++){
    var note = notes[i];
    $('#' + note).addClass('shown');
      setTimeout(function() {
        $('#' + note).removeClass('shown');
      },1000);
    }
});

另外，您将从我的注释中看到您在全局命名空间中定义了“i”。这样做永远不会好，所以如果使用“var”，请始终确保在功能块的开头定义变量。

编辑：错过了分号

EDIT2：完全错过了我需要改变循环条件。

Answer 2

希望这是你需要的

＆＃13;

$(document).ready(function() {
    var notes = ['ball_1','ball_2','ball_3'];
    for(i = notes.length; i > 0; i--){
        var note = notes[i];
        $('#' + note).addClass('shown');
        hideBall(note, i)
    }
});

function hideBall(note) {
    setTimeout(function() {
       $('#' + note).removeClass('shown');
    },1000 * i);
}

＆＃13;

#ball_1{
    width: 10px;
    height: 10px;
    background: #000000;
    border: 2px solid #ccc;
    border-radius: 50%;
}

#ball_2{
    width: 10px;
    height: 10px;
    background: #0000FF;
    border: 2px solid #ccc;
    border-radius: 50%;
}


#ball_3{
    width: 10px;
    height: 10px;
    background: #7FFF00;
    border: 2px solid #ccc;
    border-radius: 50%;
}

#ball_1, #ball_2, #ball_3 {
    width: 10px;
    height: 10px;
    border: 2px solid #ccc;
    border-radius: 50%;
}

.not_shown {
    display: none;
}

.shown {
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "ball">
        <div id = "ball_1" class = "not_shown"></div>
        <div id = "ball_2" class = "not_shown"></div>
        <div id = "ball_3" class = "not_shown"></div>
    </div>

＆＃13;

Answer 3

你正在尝试的东西不会起作用，因为它将一次性运行for循环，设置3x超时。

尝试这样的事情

jQuery(document).ready(function($) {
function myBallLoop(){
     // increment as needed
     if(typeof note == 'undefined') {
        var note = 1;
     } else if (note == 3){
        break; // end loop
     } else {
        note ++;
     }
        // show current ball qickly
        $('#ball_' + note).show('fast', function(){
            // call back after show event
            // hide current ball after 1 sec
            r = setTimeout(function(){$('#ball_' + note).hide()}, 1000);
            // self call function after 2 seconts
            t = setTimeout(function(){myBallLoop();, 2000}
       });           

     }
   // loop start
   myBallLoop();
});

Answer 4

您正在寻找 asnychronous 播放事件 - 首先ball_1显示1秒， ball_2显示1秒等等。

这样的东西不起作用：

for( var i = 0; i < notes.length; i++){ $('#' + notes[i]).addClass('shown'); setTimeout(function() { $('#' + notes[i]).removeClass('shown'); },1000); }

因为timeout将一个接一个地快速连续注册，并且所有的球都会在一秒钟内显示并隐藏。

所以你可以创建一个callback并在前一个球完全显示1秒之后设置下一个球的超时 - 见下面的演示：

$(document).ready(function() { var notes = ['ball_1', 'ball_2', 'ball_3']; hideBall(notes,0); }); function hideBall(notes,i) { $('#' + notes[i]).addClass('shown'); hide(function() { if(++i < notes.length) { hideBall(notes,i); } }, notes[i]); } function hide(callback, note) { setTimeout(function() { $('#' + note).removeClass('shown'); callback(); }, 1000); }

#ball_1 { width: 10px; height: 10px; background: #000000; border: 2px solid #ccc; border-radius: 50%; } #ball_2 { width: 10px; height: 10px; background: #0000FF; border: 2px solid #ccc; border-radius: 50%; } #ball_3 { width: 10px; height: 10px; background: #7FFF00; border: 2px solid #ccc; border-radius: 50%; } #ball_1, #ball_2, #ball_3 { width: 10px; height: 10px; border: 2px solid #ccc; border-radius: 50%; } .not_shown { display: none; } .shown { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div id="ball"> <div id="ball_1" class="not_shown"></div> <div id="ball_2" class="not_shown"></div> <div id="ball_3" class="not_shown"></div> </div>

Answer 5

利用jquery为您提供的功能。

使用$ .each迭代也与ES5的forEach相同。使用延迟方法来延迟添加类的功能与setTimeout类似。

＆＃13;

$(document).ready(() => {
  var notes = ['ball_1','ball_2','ball_3'];

  let showBalls = (i, item) => {
    $('#' + item).delay(i * 1000).queue(() => {
      $('#' + item).addClass('shown');
      $('#' + notes[i - 1]).removeClass('shown').clearQueue();
    });
  }
  $.each(notes, (i, item) => {
    showBalls(i, item);
  });
});

＆＃13;

#ball_1{
  width: 10px;
  height: 10px;
  background: #000000;
  border: 2px solid #ccc;
  border-radius: 50%;
}

#ball_2{
  width: 10px;
  height: 10px;
  background: #0000FF;
  border: 2px solid #ccc;
  border-radius: 50%;
}


#ball_3{
  width: 10px;
  height: 10px;
  background: #7FFF00;
  border: 2px solid #ccc;
  border-radius: 50%;
}

#ball_1, #ball_2, #ball_3 {
  width: 10px;
  height: 10px;
  border: 2px solid #ccc;
  border-radius: 50%;
}

.not_shown {
  display: none;
}

.shown {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id = "ball">
  <div id = "ball_1" class = "not_shown"></div>
  <div id = "ball_2" class = "not_shown"></div>
  <div id = "ball_3" class = "not_shown"></div>
</div>

＆＃13;

尝试setTimeout来显示和隐藏球

5 个答案: