Question

我的目标是创建一个函数，它会在延迟后在同一个地方交换4个div，这意味着......

div＆＃34; commission1＆＃34;是可见的，所以在1秒后它消失并且div＆＃34; commission2＆＃34;取代它的位置＆gt; 1秒后消失，> comission3＆gt; dissapears＆gt; comission4它应该循环播放，但在我设法做到这一点之前它已经无法正常工作。

我输入错误意外结束我没有发现任何标志或字母，所以我不知道这个错误是怎么回事

请记住，经过4年的休息后，我第一次使用java，然后我已经是初学者了：D。

提前谢谢你：）

function visibility() 
{
 if (document.getElementById("commission1") != null) {
 document.getElementById('commission1').style.display = 'display';
  setTimeout("document.getElementById('commission1').style.display = 'none'", 1000);
  setTimeout("document.getElementById('commission2').style.display = 'display'", 1000);
  setTimeout("document.getElementById('commission2').style.display = 'none'", 2000);
  setTimeout("document.getElementById('commission3').style.display = 'display'", 2000);
  setTimeout("document.getElementById('commission3').style.display = 'none'", 3000);
  setTimeout("document.getElementById('commission4').style.display = 'display'", 3000);
  setTimeout("document.getElementById('commission4').style.display = 'none'", 4000);
  setTimeout("document.getElementById('commission1').style.display = 'display'", 4000);
  }

Answer 1

问题是因为您将setTimeout函数的字符串作为参数提供，而不是要执行的另一个函数。它看起来应该是这样的。

setTimeout(function() {document.getElementById('foo').style.display = 'none'}, 1000);

此外，DRY（不要重复自己）即使用功能而不是一遍又一遍地复制完全相同的代码。我提供了对代码的看法。

DEMO：https://jsfiddle.net/9txkdtj3/19/

HTML

<div id="commission1" class="invisible">1</div>
<div id="commission2" class="invisible">2</div>
<div id="commission3" class="invisible">3</div>
<div id="commission4" class="invisible">4</div>

CSS

.visible {display: block;}
.invisible {display: none;}

的Javascript

function hide(id){
    document.getElementById(id).className = "invisible";
}

function show(id){
    document.getElementById(id).className = "visible";
}

function visibility(){
    hide("commission4"); show("commission1");
    setTimeout(() => { hide("commission1"); show("commission2") }, 1000);
    setTimeout(() => { hide("commission2"); show("commission3") }, 2000);
    setTimeout(() => { hide("commission3"); show("commission4") }, 3000);
    setTimeout(() => { visibility() }, 4000);
}

visibility();

Answer 2

首先，要使用style.display显示元素，您应该element.style.display = 'block'（或其他有效的显示值，例如inline-block）。我认为display不是有效的css显示值。

至于你想要实现的总体目标，我就是这样做的：

const MAX = 4;
const TIMEOUT = 1000;

function fn(n) {
	if (n > MAX || n < 0) {
		n = 1;
	}

	for (let i = 1; i <= MAX; i++) {
		let id = "commission-" + i;
		let div = document.getElementById(id);
		if (n === i) {
			div.style.display = 'block';
		} else {
			div.style.display = 'none';
		}
	}

	setTimeout(function () {
		fn(++n);
	}, TIMEOUT);
}

fn(1);

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body style="padding:24px">
	<div id="commission-1">Commission 1</div>
	<div id="commission-2">Commission 2</div>
	<div id="commission-3">Commission 3</div>
	<div id="commission-4">Commission 4</div>
	
	<script src="main.js"></script>
</body>

</html>

Div对display = none没有反应

2 个答案: