jQuery通过attr添加id不起作用

时间：2018-04-05 00:52:11

标签： javascript jquery html css

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

我已经检查了JS控制台，并且没有错误。我已经构建了一个片段来重新创建错误：

＆＃13;
＆＃13; 
$(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");
        });
    }
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

如果你正在使用jquery，你应该使用jquery来选择元素并应用点击事件，不要混合使用jilla＆＃39; def index @savedHTML = ScrapedPage.all end 和getElementsByClassName。它将使您的代码在将来更难以阅读和维护。

问题1：

  

按下删除/完成按钮后，它将应用于全部   李元素

这是因为当你做

时 
addEventListener

这就是jquery等同于选择类 $(".completeicon").attr("src", "https://png.icons8.com/cotton/50/000000/checkmark.png") 的所有元素，因此单击一个会触发所有元素。这就是为什么一切都完成的原因。

所有删除都是出于其他原因：

.completeicon

每当您添加待办事项时，您只需将删除事件分配给第一个待办事项中的第一个删除按钮（因为它是 document.getElementsByClassName("remove")[0].addEventListener('click', function() { $(item).fadeOut(1000); }); ）。但是，每次拨打document.getElementsByClassName("remove")[0]时，addEventListener代表添加到列表中的最新项目。因此，单击第一个删除，将连续删除列表中的自身和其他项目。

这也解释了问题2：

  

此外，如果在列表中添加更多项目，则按钮会丢失   他们的功能。

那是因为你只是将事件应用到列表中的第一个项目（item th 项目）。

要解决它，而不是使用[0]选择DOM元素应用事件，你可以直接将事件应用到各种DOM元素的变量，这很方便，恕我直言更容易阅读：

就在此之前：

document.getElementsByClassName

你可以做到

 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代码。

答案 1 :(得分：1)

简单地替换

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

与

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

您不需要查询dom，只需将处理程序附加到remove变量。

修改

OOPS，我忘记了完成部分

替换

document.getElementsByClassName("complete")[0].addEventListener('click', function(){
    $(".completeicon").attr("src", "https://png.icons8.com/cotton/50/000000/checkmark.png");
});

与

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

太

＆＃13;
＆＃13; 
$(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);
	
	
remove.addEventListener('click', function(){
	$(item).fadeOut(1000);
	});

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

});
	
	}
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题