使用追加的对象对象问题

Question

我的目标是创建一个待办事项列表，并有可能将更多项目添加到列表中。

我正在使用.append() 方法添加内容。但是，我还需要为添加的每个新项目添加一个复选框。

这是我目前所拥有的

（运行代码 sn-p 并添加一个新项目，你会看到我遇到的错误）

$(document).ready(function() {
	$("#button").click(function() {
		var check = $("<input>", { type: "checkbox" });
		var toAdd = $("input[name=ListItem]").val();
		$("ul").append($("<li>" + check + "<label>" + toAdd + "</label>" + "</li>"));
	});
});

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	margin: 50px 0;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 20px;
	font-weight: bolder;
}
input {
	cursor: pointer;
	position: relative;
	visibility: hidden;
}
input:after {
	border: 3px solid lightblue;
	border-radius: 50%;;
	content: "";
	display: block;
	height: 46px;
	width: 46px;
	text-align: center;
	visibility: visible;
	transition: all 100ms ease-in-out;
}
input:checked:after {
	border: 3px solid lightblue;
	color: white;
	font-size: 30px;
	border-radius: 50%;
	content: "✘";
	line-height: 43px;
	background-color: lightblue;
	animation: bounce 300ms ease-in-out forwards;
}
@keyframes bounce {
	0% {transform: scale(1, 1);}
	70% {transform: scale(1.1, 1.1);}
	100% {transform: scale(1, 1);}
}
label {
	position: relative;
	left: 50px;
	top: 18px;!important
}
input[type=text] {
	border: 3px solid lightblue;
	width: 100px;
	height: 50px;
	visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="list">
 <h1>To do list</h1>
 <form name="toDoList">
  <input type="text" name="ListItem" />
 </form>
 <div id="button">Add</div>
 <ul>
  <li>
   <input type="checkbox">
   <label for="checkbox">Item1</label>
  </li>
  <li>
   <input type="checkbox">
   <label for="checkbox">Item2</label>
  </li>
  <li>
   <input type="checkbox">
   <label for="checkbox">Item3</label>
  </li>
 </ul>
</div>

Answer 1

您将Object 附加到string，因此出现错误。以下是您的代码的更新工作版本：

$(document).ready(function() {
  $("#button").click(function() {
    var toAdd = $("input[name=ListItem]").val();
    $("ul").append($("<li><input type='checkbox'><label>" + toAdd + "</label>" + "</li>"));
  });
});

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 50px 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 20px;
  font-weight: bolder;
}

input {
  cursor: pointer;
  position: relative;
  visibility: hidden;
}

input:after {
  border: 3px solid lightblue;
  border-radius: 50%;
  ;
  content: "";
  display: block;
  height: 46px;
  width: 46px;
  text-align: center;
  visibility: visible;
  transition: all 100ms ease-in-out;
}

input:checked:after {
  border: 3px solid lightblue;
  color: white;
  font-size: 30px;
  border-radius: 50%;
  content: "✘";
  line-height: 43px;
  background-color: lightblue;
  animation: bounce 300ms ease-in-out forwards;
}

@keyframes bounce {
  0% {
    transform: scale(1, 1);
  }
  70% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

label {
  position: relative;
  left: 50px;
  top: 18px;
  !important
}

input[type=text] {
  border: 3px solid lightblue;
  width: 100px;
  height: 50px;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="list">
  <h1>To do list</h1>
  <form name="toDoList">
    <input type="text" name="ListItem" />
  </form>
  <div id="button">Add</div>
  <ul>
    <li>
      <input type="checkbox">
      <label for="checkbox">Item1</label>
    </li>
    <li>
      <input type="checkbox">
      <label for="checkbox">Item2</label>
    </li>
    <li>
      <input type="checkbox">
      <label for="checkbox">Item3</label>
    </li>
  </ul>
</div>

Answer 2

保持大部分代码不变，修复.append 命令就足够了，使用函数get(0).outerHTML() 如下：

$("ul").append($("<li>" + check.get(0).outerHTML() + "<label>" + toAdd + "</label>" + "</li>"));

函数get(0) 选择对象中的第一个（也是唯一的）元素，.outerHTML() 从 jQuery 对象生成 HTML。

这里是工作的 sn-p：

$(document).ready(function() {
	$("#button").click(function() {
		var check = $("<input>", { type: "checkbox" });
		var toAdd = $("input[name=ListItem]").val();
alert(check.get(0).outerHTML);
		$("ul").append($("<li>" + check.get(0).outerHTML + "<label>" + toAdd + "</label>" + "</li>"));
	});
});

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	margin: 50px 0;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 20px;
	font-weight: bolder;
}
input {
	cursor: pointer;
	position: relative;
	visibility: hidden;
}
input:after {
	border: 3px solid lightblue;
	border-radius: 50%;;
	content: "";
	display: block;
	height: 46px;
	width: 46px;
	text-align: center;
	visibility: visible;
	transition: all 100ms ease-in-out;
}
input:checked:after {
	border: 3px solid lightblue;
	color: white;
	font-size: 30px;
	border-radius: 50%;
	content: "✘";
	line-height: 43px;
	background-color: lightblue;
	animation: bounce 300ms ease-in-out forwards;
}
@keyframes bounce {
	0% {transform: scale(1, 1);}
	70% {transform: scale(1.1, 1.1);}
	100% {transform: scale(1, 1);}
}
label {
	position: relative;
	left: 50px;
	top: 18px;!important
}
input[type=text] {
	border: 3px solid lightblue;
	width: 100px;
	height: 50px;
	visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="list">
 <h1>To do list</h1>
 <form name="toDoList">
  <input type="text" name="ListItem" />
 </form>
 <div id="button">Add</div>
 <ul>
  <li>
   <input type="checkbox">
   <label for="checkbox">Item1</label>
  </li>
  <li>
   <input type="checkbox">
   <label for="checkbox">Item2</label>
  </li>
  <li>
   <input type="checkbox">
   <label for="checkbox">Item3</label>
  </li>
 </ul>
</div>