Question

我有一个小项目，可以将项目添加到列表中。这些项目旁边有一个按钮，我希望能够按下该按钮添加（文本修饰：直通）。我尝试了一些不同的东西，但似乎没有任何工作（Javascript添加项目，删除最后一项，添加新的li元素的类，等等。一切正常，我的问题只有JQuery部分，更多评论关于代码本身）。

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：

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);
 });

Answer 1

使用$('li.liEl').css('text-decoration','line-through');

之类的风格

Answer 2

您的jQuery css函数错误，您需要提供两个参数来设置css值（请参阅：css-property-name-value）。
您的选择器语法（$('li.liEl')）不正确，它会返回所有<li>元素，而不是单击按钮所在的元素。您可以使用此：$(this).parent().css('text-decoration', 'line-through');。
您的代码包含一些错误，最后添加的按钮不会触发该功能。这是因为您的点击功能在添加到DOM的新元素之前添加了。并且它会导致您的点击功能被多次触发，以便提前添加按钮。

这是固定代码的代码段。由于您已经使用了jQuery，因此我更改了几个本机java脚本本机元素查询和事件处理程序，以及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>

HTML列表，添加JQuery以交叉选定的项目。

2 个答案: