Question

我使用HTML，CSS和JavaScript创建了一个基本清单，当您单击列表项时，该清单具有删除线切换。但是，当我添加新项目时，无法在它们上使用切换键。

我创建了一个for循环，以使列表项监听点击，并创建了一个函数，该函数在单击时会在列表项之间添加一行，但是正如之前提到的，该开关仅适用于已创建的列表项。

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");


function inputLength() {
	return input.value.length;
}

function createListElement() {
	var li = document.createElement("li");
	li.appendChild(document.createTextNode(input.value));
	ul.appendChild(li);
	input.value = "";
}

function addListAfterClick() {
	if (inputLength() > 0) {
		createListElement();
	}
}

function addListAfterKeypress(event) {
	if (inputLength() > 0 && event.keyCode === 13) {
		createListElement();
	}
}
var list = document.getElementsByTagName("li");
for (var i=0; i < list.length; i++) {
	list[i].addEventListener("click", addToggle);
}

function addToggle() {
	this.classList.toggle("done");
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

.done {
  text-decoration: line-through;
}

<!DOCTYPE html>
<html>
<head>
	<title>Javascript + DOM</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Shopping List</h1>
	<p id="first">Get it done today</p>
	<input id="userinput" type="text" placeholder="enter items">
	<button id="enter">Enter</button>
	<ul>
		<li class="bold red" random="23">Notebook</li>
		<li>Jello</li>
		<li>Spinach</li>
		<li>Rice</li>
		<li>Birthday Cake</li>
		<li>Candles</li>
	</ul>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

我希望正在创建的列表项也具有切换功能，但是只有已经存在的列表项才具有切换功能。

Answer 1

将初始列表项作为HTML文档的一部分加载到DOM中之后，切换功能将由Javascript应用：

var list = document.getElementsByTagName("li");
for (var i=0; i < list.length; i++) {
    list[i].addEventListener("click", addToggle);
}

list中的每个项目都应用了事件侦听器。但是，list中的项目仅反映创建list时（即DOM加载时）匹配的元素！添加新项时，此代码无法神奇地运行并将事件侦听器添加到新元素。

生成新的li时，您将不得不在某个时候添加相同的事件侦听器。有几种方法可以做到这一点；在下面的示例中，在将新列表项添加到DOM之前，我在addEventListener中包括了对createListElement()的另一个调用：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");


function inputLength() {
	return input.value.length;
}

function createListElement() {
	var li = document.createElement("li");
	li.appendChild(document.createTextNode(input.value));
  li.addEventListener("click", addToggle);
	ul.appendChild(li);
	input.value = "";
}

function addListAfterClick() {
	if (inputLength() > 0) {
		createListElement();
	}
}

function addListAfterKeypress(event) {
	if (inputLength() > 0 && event.keyCode === 13) {
		createListElement();
	}
}
var list = document.getElementsByTagName("li");
for (var i=0; i < list.length; i++) {
	list[i].addEventListener("click", addToggle);
}

function addToggle() {
	this.classList.toggle("done");
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

.done {
  text-decoration: line-through;
}

<!DOCTYPE html>
<html>
<head>
	<title>Javascript + DOM</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Shopping List</h1>
	<p id="first">Get it done today</p>
	<input id="userinput" type="text" placeholder="enter items">
	<button id="enter">Enter</button>
	<ul>
		<li class="bold red" random="23">Notebook</li>
		<li>Jello</li>
		<li>Spinach</li>
		<li>Rice</li>
		<li>Birthday Cake</li>
		<li>Candles</li>
	</ul>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

添加新列表项时，创建的切换功能不起作用

1 个答案: