Question

我不知道这个代码在哪里出错了。

我在寻找：

点击动画开始时的标签列表，再次单击它会停止。我打算用setInterval（仅用于练习）。

以下是我尝试使用的代码：

function writeMe() {
    var p = document.createElement("p");
    p.innerHTML = "List 1";
    var ilu = document.getElementById("ilu");
    ilu.appendChild(p);
        if (ilu.getElementsByTagName("p").length === 5) {
            ilu.innerHTML = "";
        }
}
    var li = document.getElementsByTagName("li");
    for(i=0;i<li.length;i++) {
        li[i].addEventListener("click", function(e) {
            if (this.style.backgroundColor == "yellow") {
                this.style.backgroundColor = "";
                clearInterval(writeMe);
            } else {
                for(i=0;i<li.length;i++) {
                    li[i].style.backgroundColor = "";
                }
                this.style.backgroundColor = "yellow";
                var writeMe = setInterval(writeMe, 1000);
                writeMe();
              }
        e.stopPropagation();
        });
    }

我的逻辑是：

For循环设置每个li的点击条件。现在，当他们被点击时，他们会调用setInterval函数，再次点击它们就会停止它。

我哪里错了？感谢。

Answer 1

这是你可能正在寻找的东西：

    // group all functions so that we can call the one 
    // corresponding to the clicked tab
    var fns = [writeMe, writeMe1, writeMe2, writeMe3];

    var tellMe = null;
    var li = document.getElementsByTagName("li");

    // need to use `let` here to avoid IIFE
    for (let i = 0; i < li.length; i++) {
        li[i].addEventListener("click", function (e) {
            clearInterval(tellMe);
            for (let j = 0; j < li.length; j++) {
                li[j].style.backgroundColor = "";
            }
            this.style.backgroundColor = "yellow";
            tellMe = setInterval(fns[i], 1000);
            e.stopPropagation();
        });
    }

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
	.web_image {
		display: block;
		text-align:center;
	}
	.next_image {
		display: none;
		text-align:center;
	}
	ul {
		background-color: #a9b9c9;
		text-align:left;
		margin:0;
		padding:0;
	}
	li {
		list-style-type:none;
		display:inline-block;
		padding:20px;
		border:1px solid red;
	}
</style>
</head>
<body>
	<h1 class="abc def ghi jkl">Header 1</h1>
	<p id="som_thng">Restatis igitur vos; Ille enim occurrentia nescio quae comminiscebatur;</p>
	<div class="web_image"><img src="http://placehold.it/350x150" />	</div>
	<div class="next_image"><img width="350px" src="http://img06.deviantart.net/1b60/i/2013/225/5/6/shiva_by_christasvengel-d6hyf9n.jpg" />	</div>
	
	<ul>
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4</li>
		<li>List 5</li>
	</ul>
		<div id="ilu"></div>
<script>
	(function() {
		//var writeMe1 = setInterval(writeMe1, 1000);
		//var writeMe2 = setInterval(writeMe2, 1000);
		//var writeMe3 = setInterval(writeMe3, 1000);
    function writeMe1() {
	    var p = document.createElement("p");
	    p.innerHTML = "List 1.";
	    var ilu = document.getElementById("ilu");
					ilu.appendChild(p);
	    if (ilu.getElementsByTagName("p").length === 5) {
    	    ilu.innerHTML = "";
    	}
    }
		function writeMe2() {
	    var p = document.createElement("p");
	    p.innerHTML = "List 2.";
	    var ilu = document.getElementById("ilu");
					ilu.appendChild(p);
	    if (ilu.getElementsByTagName("p").length === 5) {
    	    ilu.innerHTML = "";
    	}
    }
		function writeMe3() {
	    var p = document.createElement("p");
	    p.innerHTML = "List 3.";
	    var ilu = document.getElementById("ilu");
					ilu.appendChild(p);
	    if (ilu.getElementsByTagName("p").length === 5) {
    	    ilu.innerHTML = "";
    	}
    }
		function writeMe() {
					var p = document.createElement("p");
					p.innerHTML = "List 1";
					var ilu = document.getElementById("ilu");
					ilu.appendChild(p);
					if (ilu.getElementsByTagName("p").length === 5) {
									ilu.innerHTML = "";
			}
		}
      
      
    // group all functions so that we can call the one 
    // corresponding to the clicked tab
    var fns = [writeMe, writeMe1, writeMe2, writeMe3];

    var tellMe = null;
    var li = document.getElementsByTagName("li");

    // need to use `let` here to avoid IIFE
    for (let i = 0; i < li.length; i++) {
        li[i].addEventListener("click", function (e) {
            clearInterval(tellMe);
            for (let j = 0; j < li.length; j++) {
                li[j].style.backgroundColor = "";
            }
            this.style.backgroundColor = "yellow";
            tellMe = setInterval(fns[i], 1000);
            e.stopPropagation();
        });
    }
      
		var div = document.querySelectorAll("div");
		div[0].addEventListener("click", function(e) {
			div[0].style.display = "none";
			div[1].style.display = "block";
			e.stopPropagation();
		});
		div[1].addEventListener("click", function(e) {
			div[1].style.display = "none";
			div[0].style.display = "block";
			e.stopPropagation();
		});
	})();
</script>
</body>
</html>

＆＃13;

Answer 2

您的方法存在一些问题：

在原始问题中，当您设置间隔select m.CustomerId, m.CustomerName, m.Bank, m.Amount from mytable m where exists (select 1 from mytable m2 where m.CustomerId = m2.CustomerId and m.Bank <> m2.Bank);时，您有一个名为writeMe的函数，您将覆盖范围。但是您在评论中也提到，您已将其重命名为var writeMe = setInterval(writeMe, 1000);哪个应该已解决该冲突。
在JSBin中：
- 您正尝试使用循环tellMe的索引作为值。您需要了解变量范围和闭包。点击发生在循环结束很久之后，无论您点击哪个元素，i的值都可能始终保持在i（在此特定情况下）。
- 声明5等多个writeMe方法不是解决方案。您必须添加另一个与其他方法相同的writeMe方法，除非可能有1或2个值更改。
- 在循环中多次使用writeMe2, writeMe3...，而不将其声明为i的局部变量。您将上范围变量隐藏到闭包范围中。虽然它（但）不会影响您的用例，但它将在以后保持代码的开放性。

尝试使用以下代码段。

var

我故意遗漏了功能的实际内容，供您根据自己的要求实施。如果您希望在我的代码中看到控制台日志，请不要忘记在您正在测试的浏览器中打开开发工具控制台。

单击事件处理程序内的SetInterval方法

2 个答案: