Question

所以我的主页用我想要点击的对象制作，这将使其他对象出现。我想要保留主页面，但每次点击我都希望其他对象一个接一个地出现。我有大约5层由index.html组成的我只是不确定我需要在每个图层中添加什么代码，这样当我点击主页面对象时，其他图层就会显示出来。

Answer 1

With every click I want other objects to appear one by one

You can add an event listener which, whenever it detects a click, executes a function which enables each next hidden object to appear.

Working Example:

var boxes = document.getElementsByTagName('div');
var boxNumber = 1;

function revealBox() {
    if (boxNumber < (boxes.length - 2)) {
        boxes[boxNumber].classList.add('revealed');
        boxNumber++;
    }

    if (boxNumber < (boxes.length - 2)) {
        boxes[0].textContent = 'Click me to reveal Box ' + boxNumber;
    }
}

boxes[0].textContent += ' to reveal Box ' + boxNumber;
boxes[0].addEventListener('click', revealBox, false);

div {
display: none;
width: 100px;
height: 100px;
font-size: 22px;
text-align: center;
background-color: rgb(163, 163, 163);
vertical-align: top;
}

div:nth-of-type(1) {
display: inline-block;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
cursor: pointer;
}

div.revealed {
display: inline-block;
}

<div>Click Me</div>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
<div>Box 5</div>

每次点击某个对象时如何使其他对象出现

1 个答案: