javascript - 创建循环以简化此 HTML 和 CSS 代码

Question

我有以下代码可以在单击按钮时产生下拉效果。七个 div 中的每一个都以 50px 的增量下降。我正在寻找是否有一种更简化的方法来实现相同的效果，方法是循环一个函数以 50px 的增量删除每个 susbsequent div，而不必调用这么多函数:

HTML

<button id="click_btn_one" onclick="dropSeven('divSeven'), dropSix('divSix'), dropFive('divFive'), dropFour('divFour'), dropThree('divThree'), dropTwo('divTwo'), dropOne('divOne')">Click here</button>

<div id="divSeven">This is div seven</div>
<div id="divSix">This is div six</div>
<div id="divFive">This is div five</div>
<div id="divFour">This is div four</div>
<div id="divThree">This is div three</div>
<div id="divTwo">This is div two</div>
<div id="divOne">This is div one</div>

CSS

#divSeven {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#000; color:#fff}    
#divSix {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#111; color:#fff}
#divFive {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#222; color:#fff}
#divFour {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#333; color:#fff}
#divThree {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#444; color:#fff}
#divTwo {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#555; color:#fff}
#divOne {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#666; color:#fff}

和JavaScript

function dropSeven(el) {
var seven = document.getElementById(el);
seven.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s";
seven.style.opacity = "1";
seven.style.top = "350px"
}

function dropSix(el) {
var six = document.getElementById(el);
six.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s";
six.style.opacity = "1";
six.style.top = "300px"
}

function dropFive(el) {
var five = document.getElementById(el);
five.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s";
five.style.opacity = "1";
five.style.top = "250px"
}

function dropFour(el) {
var four = document.getElementById(el);
four.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s";
four.style.opacity = "1";
four.style.top = "200px"
}

function dropThree(el) {
var three = document.getElementById(el);
three.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s";
three.style.opacity = "1";
three.style.top = "150px"
}

function dropTwo(el) {
var two = document.getElementById(el);
two.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s";
two.style.opacity = "1";
two.style.top = "100px";
}

function dropOne(el) {
var one = document.getElementById(el);
one.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s";
one.style.opacity = "1";
one.style.top = "50px"
}

Answer 1

考虑将您的函数编写为:

function drop(offset, id) {
  var four = document.getElementById(id);
  four.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s";
  four.style.opacity = "1";
  four.style.top = offset + "px"
}

然后你可以创建一个函数来删除所有:

function dropAll() {
  ['divOne', 'divTwo', ..., 'divSeven'].forEach(function(id, index) {
    var offset = index * 50 + 50;
    drop(offset, id);
  });
}