HTML列表，添加JQuery来交叉选择的项。

I have a little app that adds items to a list. The items appear with a button next to them, I want to be able to press that button to add a (text-decoration: line-through). I have tried a few different things but nothing seems to work (the Javascript to add items, delete the last item, add classes to the new li elements, etc. All that works fine, my problem is only with the JQuery part, more comments on the code itself).

我有一个小应用程序，它将项目添加到列表中。这些条目出现在它们旁边的一个按钮上，我希望能够按下这个按钮来添加一个(文本装饰:行通过)。我尝试了一些不同的东西，但似乎没有什么效果(Javascript添加条目、删除最后一个条目、向新的li元素添加类等等)，所有这些都很好，我的问题只是JQuery部分，更多关于代码本身的注释。

HTML

HTML

<html>

<body>

<h1> Shopping List </h1>


<button id="add"> Add </button>

<input type="text" id="input" placeholder="Enter Items"> </input>

<button id="remove"> Remove Last </button>


<ul id="list">

</ul>

</body>

</html>

Js/Jq:

Js /金桥:

document.getElementById("add").addEventListener('click', function() {


var check = document.createElement("button");
var input = document.getElementById("input").value;
var newEl = document.createElement("li");
var newText = document.createTextNode(input);
var buttonText = document.createTextNode("Check");

newEl.className = "liEl";
newEl.appendChild(newText);
newEl.appendChild(check);
check.setAttribute("class", "checked");
check.appendChild(buttonText);


/* Problem starts here */

$("button.checked").on('click', function() {

$('li.liEl').css('text-decoration: line-through');

 /* It should get the button with the class "checked" and on click, make the li elements with class "liEl" to have that css... */

 }
);


var position = document.getElementsByTagName("ul")[0];
position.appendChild(newEl);
document.getElementById("input").value = "";



document.getElementById('input').onkeypress = function(e) {
if (e.keyCode == 13) {
document.getElementById('add').click(); /*  adds an event listener to the submit text, keyCode 13 equals the enter key so when it's pressed it presses the add button. */
}
}
});


 /* Delete last item function: */

  document.getElementById("remove").addEventListener('click', function() {
  var els = document.getElementsByTagName("li");
  var removeEl = els[els.length - 1]; // <-- fetching last el, If els is an array, it has indices from 0 to els.length - 1. 0 is the first, els.length - 1 is the last index.
  var containerEl = removeEl.parentNode;
  containerEl.removeChild(removeEl);
 });

2 个解决方案

#1

Your jQuery css function is wrong, you need to provide two parameter to set css value (see this: css-property-name-value).
您的jQuery css函数是错误的，您需要提供两个参数来设置css值(请参阅css属性名值)。
Your selector syntax ($('li.liEl')) is not right, it would return all <li> element, not the one the clicked button is located. You can use this: $(this).parent().css('text-decoration', 'line-through');.
您的选择器语法($(' liel '))不正确，它将返回所有
元素，而不是单击按钮所在的元素。您可以使用这个:$(this).parent()。css(文字修饰,'从');。
Your code contain some bug, the last added button would not trigger the function. It is because your click function is added before the new element added to DOM. And it would cause your click function to be triggered multiple time for earlier added button.
您的代码包含一些bug，最后添加的按钮不会触发该函数。这是因为在将新元素添加到DOM之前添加了单击函数。并且它会导致你的点击功能被触发多次，为更早的添加按钮。

Here's the snippet for fixed code. Since you already using jQuery, I change several native java script native element query and event handler whith jquery syntax.

这是固定代码的代码片段。由于您已经使用了jQuery，所以我更改了一些本机java脚本原生元素查询和事件处理程序whith jQuery语法。

$(function () {
	$("#add").click(function(evt) {
		var input = $('#input').val();
		var check = $('<button class="checked">Check</button>');
		var newEl = $('<li class="liEl"></li>');
		newEl.append(input);
		newEl.append(check);
		
		$(check).click(function(evt) {
			$(this).parent().css('text-decoration', 'line-through');
		});
		
		$('#list').append(newEl);
		$('#input').val('');
	});
	
	$('#remove').click(function(evt) {
		var lastEl = $('li.liEl').last();
		lastEl.remove();
	});
	
	 $('#input').keypress(function(evt) {
		if (evt.keyCode === 13) {
			$("#add").click();
		}
	 });
});

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

<body>

<h1> Shopping List </h1>

<button id="add"> Add </button>
<input type="text" id="input" placeholder="Enter Items" />
<button id="remove"> Remove Last </button>

<ul id="list"></ul>

</body>

#2

Use style like $('li.liEl').css('text-decoration','line-through');

使用风格像$(' li.liEl '). css(文字修饰,“从”);

#1

Your jQuery css function is wrong, you need to provide two parameter to set css value (see this: css-property-name-value).
您的jQuery css函数是错误的，您需要提供两个参数来设置css值(请参阅css属性名值)。
Your selector syntax ($('li.liEl')) is not right, it would return all <li> element, not the one the clicked button is located. You can use this: $(this).parent().css('text-decoration', 'line-through');.
您的选择器语法($(' liel '))不正确，它将返回所有
元素，而不是单击按钮所在的元素。您可以使用这个:$(this).parent()。css(文字修饰,'从');。
Your code contain some bug, the last added button would not trigger the function. It is because your click function is added before the new element added to DOM. And it would cause your click function to be triggered multiple time for earlier added button.
您的代码包含一些bug，最后添加的按钮不会触发该函数。这是因为在将新元素添加到DOM之前添加了单击函数。并且它会导致你的点击功能被触发多次，为更早的添加按钮。