javascript - jQuery 通过 attr 添加 id 不工作

Question

我正在构建一个待办事项列表，并向列表中添加一个删除和完成的功能。但是，一旦按下删除/完成按钮，它就会应用于所有 li 元素。此外，如果向列表中添加更多元素，按钮将失去其功能。

我检查了 JS 控制台，没有错误。我构建了一个片段来重现错误:

$(document).ready(function() {
    var removeImg = '<img src= "https://www.icon2s.com/wp-content/uploads/2013/07/ios7-trash-icon.png" width = "22px" class = "removeicon">';
    var completeImg = '<img src = "https://www.shareicon.net/data/128x128/2016/11/28/857777_circle_512x512.png" class = "completeicon" width = "22px">';
    document.getElementById("add").addEventListener('click', function(){
        var value = document.getElementById("addtask_TD").value;
        var lookat = document.getElementById("addtask_TD");
        if (value) {
            addItemTodo(value);
            lookat.focus();
            lookat.select();
        }

    });
    function addItemTodo(text){
        var list = document.getElementById('todo');

        var item = document.createElement('li');
        item.innerText = text;
        
        var buttons = document.createElement('div');
        buttons.classList.add('buttons');
        
        var remove = document.createElement('button');
        remove.classList.add('remove');
        remove.classList.add('btn');
//		$(".remove").attr("id","delete");
        remove.innerHTML = removeImg;
        
        var complete = document.createElement('button');
        complete.classList.add('complete');
        complete.classList.add('btn');
//	$(".complete").attr("id","done");
        complete.innerHTML = completeImg;
        buttons.appendChild(remove);
        buttons.appendChild(complete);
        item.appendChild(buttons);
        list.appendChild(item);
	document.getElementsByClassName("remove")[0].addEventListener('click', function(){
            $(item).fadeOut(1000);
	});
        document.getElementsByClassName("complete")[0].addEventListener('click', function(){
            $(".completeicon").attr("src", "https://png.icons8.com/cotton/50/000000/checkmark.png");
        });
    }
});

   	

header{
	width:100% !important;
	height: 80px !important;
	position:fixed !important;
	top:0 !important;
	
	left:0 !important;
	z-index:5 !important;
	background: #25b99a !important;
	box-shadow:0px 2px 4px rgba(44,62,80,0.15) !important;
	padding:15px;
}

#addtask_TD {
	width:100% !important;
	height:50px !important;
	float:left !important;
	border-radius: 5px !important;
	border: 0px;
	box-shadow:none !important;
	outline:none;
	color:#fff;
	font-size:15px;
	font-weight:400px;
	text-indent:16px;
	border-top-right-radius:25px !important;
	border-top-left-radius:5px !important;
	border-bottom-right-radius:25px !important;
	border-bottom-left-radius:5px !important;
	text-indent:10px !important;

	background-color:rgba(0, 0, 0,0.22) !important;	
}

header input:: -webkit-input-placeholder{
	color:rgba(255,255,255,.75);
}

header input:: -moz-input-placeholder{
	color:rgba(255,255,255,.75);
}
header input:: -o-input-placeholder{
	color:rgba(255,255,255,.75);
}
header input:: -ms-input-placeholder{
	color:rgba(255,255,255,.75);
}
header button {
	width:50px;
	height:50px;
	position:absolute;
	top: 15px;
	right:15px;
	z-index:2;
	border-radius:25px;
	background:8px;
	box-shadow:none;
	outline: none; 
	background-color:white;
	border:none;
		-o-appearance:none !important;
	-ms-appearance:none !important;
	-moz-appearance:none !important;
	-webkit-appearance:none !important;
	appearance:none !important;
	
}

header button svg{
	width:16px;
	height:16px;
	position:absolute;
	top:50%;
	left:50%;
	margin: -8px 0 0 -8px;
}

header button svg .fill{
	fill: #25b99a;
}

ul.todo{
	width:100%;
	float:left;
		
}
.st0{fill:none;}
.st1{fill:#C0CECB;}
ul.todo li {
	width:108%;
	float:left;
	height:50px;
	position:relative;
	background:darkblue;
	border-radius:5px;
	box-shadow:0px 1px 2px rgba(44,62,80,0.10);
	bottom: -16px;
	padding: 0 100px 0 0;
	/**margin: -20px;**/
	margin: 0 0 15px -20px;
}

.containtodolist{
	width:100%;
	float:left;
	padding: 15px;
}

ul#todo li:last-of-type{
/**	margin:0;**/
}

ul#todo li .buttons {
	width:100px;
	height:50px;
	position:absolute;
	top:0;
	right:0;
}

ul#todo li .buttons button{
	width:50px;
	height:50px;
	float:left;
	background:none;
	border:0px;
	box-shadow:none;
	outline:none;
	position:relative;
	
	-o-appearance:none !important;
	-ms-appearance:none !important;
	-moz-appearance:none !important;
	-webkit-appearance:none !important;
	appearance:none !important;
	
}

ul#todo li .buttons button:last-of-type:before{
	content:'';
	width:1px;
	height:30px;
	position:absolute;
	top:10px;
	left: 0;
	background:#edf0f1;
	
}

.buttons{
	display:block;
}

.noFill{
	fill:none;
}

ul#todo li .buttons button svg{
	width:22px;
	height:22px;
	position:absolute;
	top:50%;
	left:50%;
	margin: -11px 0 0 -11px;
}

li{
	background-color:lightblue;
	margin: 65px 0 -70px 0;
	padding-top:7px;
	padding-bottom:24px;
	padding-left:50px;
	
	border-top: 6px solid #79afaf;
  right: 40px;
}

.remove,.complete{
	margin: 10px;

}

.remove,.complete{
		padding-top: 6px !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class = "containtodolist">
    <header>
        <input id = "addtask_TD" type = "text" placeholder = "Add task">
        <button id = "add"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><g><path class="fill" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/></g></svg></button>
    </header>	
    <div class = "container_TD" id = "todo">
<!--	<ul class = "todo" id = "completed">
            <li> WHouha 
                    <div class = "buttons">
                            <button class = "remove"> <img src="https://png.icons8.com/ios/50/000000/delete.png" width = "22px"></button>
                            <button class = "complete"><img src = "https://www.shareicon.net/data/128x128/2016/11/28/857777_circle_512x512.png" width = "22px"> </button>
                    </div>
            </li>
    </ul>-->
    </div>		
    <ul class = "todo" id = "completed"></ul>
</div>
		

Answer 1

如果你正在使用 jquery，你应该使用 jquery 来选择元素和应用点击事件，不要混用 vanilla js 的 getElementsByClassName 和 addEventListener。这将使您的代码在未来更难阅读和维护。

问题 1:

once the remove/completed button is pressed, it is applied to the all the li elements

这是因为当你这样做的时候

      $(".completeicon").attr("src", "https://png.icons8.com/cotton/50/000000/checkmark.png")

这相当于选择 .completeicon 类的所有元素的 jquery，因此单击一个会触发所有元素。这就是一切都完成的原因。

所有的删除都是出于不同的原因:

 document.getElementsByClassName("remove")[0].addEventListener('click', function() {
      $(item).fadeOut(1000);
    });

每当您添加待办事项时，您只会将删除事件分配给第一个待办事项中的第一个删除按钮(因为它是 document.getElementsByClassName("remove")[0])。但是，每次调用 addEventListener 时，item 表示添加到列表中的最新元素。所以点击第一个删除，将连续删除它自己和列表中的其他元素。

这也解释了问题 2:

Furthermore, if one adds more items to the list, the buttons lose their functionality.

那是因为，您只是将事件应用到列表中的第一项([0]^th 项)。

要解决它，您可以直接将事件应用到各种 DOM 元素的变量，而不是使用 document.getElementsByClassName 来选择应用事件的 DOM 元素，这很方便，恕我直言更容易阅读:

就在这之前:

 buttons.appendChild(remove);
 buttons.appendChild(complete);
 item.appendChild(buttons);

 list.appendChild(item);

你可以做到

$(remove).click(function(){
    $(item).fadeOut(1000);
});

$(complete).click(function(){
    $(this).find('.completeicon').attr('src',"https://png.icons8.com/cotton/50/000000/checkmark.png")
});

它只针对最新的 remove 按钮和即将添加的 complete 按钮。然后完全删除 addEventListener 代码。