如何显示 TODO 列表中的删除按钮
How te display delete button from a TODO list
我正在制作一个待办事项列表,并且我有一个功能,当我将鼠标悬停在相应的 Li 上时,它会显示(它增加了不透明度)删除按钮。
todosUl.addEventListener("mouseover", function(event) {
var elementHovered = event.target;
var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
deleteButton.style.opacity=1;
});
todosUl.addEventListener("mouseout", function(event) {
var elementHovered = event.target;
var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
deleteButton.style.opacity = 0;
});
问题是每当我接近按钮区域时,按钮又消失了。
发生这种情况时,控制台会显示:Cannot read 属性 'style' of null
这就是我创建 Li 的方式:
todoLi.appendChild(view.createDeleteButton(position));
createDeleteButton: function (liId) {
var deleteButton = document.createElement('button');
deleteButton.textContent = 'X';
deleteButton.className = 'deleteButton';
deleteButton.id = 'deleteButton'+liId;
return deleteButton;
我建议使用 mouseenter
和 mouseleave
而不是 mouseover
和 mouseout
事件。
var todosUl = document.getElementById("todoitem1");
todosUl.addEventListener("mouseenter", function(event) {
var elementHovered = event.target;
var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
deleteButton.style.opacity=1;
});
todosUl.addEventListener("mouseleave", function(event) {
var elementHovered = event.target;
var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
deleteButton.style.opacity = 0;
});
<div id='todoitem1' width='100%' style='background-color: yellow'>
<button id="deleteButtontodoitem1" style='opacity: 0'>Delete</button>
</div>
您需要 js 进行此渲染有什么特别的原因吗?下面是一个html/css模型
.delete {
opacity: 0;
}
li:hover > .delete {
opacity: 1;
}
<ul id="toDos">
<li>To Do Item 1<input type="button" class="delete" value="Delete"/></li>
<li>To Do Item 2<input type="button" class="delete" value="Delete"/></li>
<li>To Do Item 3<input type="button" class="delete" value="Delete"/></li>
<li>To Do Item 4<input type="button" class="delete" value="Delete"/></li>
</ul>
我正在制作一个待办事项列表,并且我有一个功能,当我将鼠标悬停在相应的 Li 上时,它会显示(它增加了不透明度)删除按钮。
todosUl.addEventListener("mouseover", function(event) {
var elementHovered = event.target;
var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
deleteButton.style.opacity=1;
});
todosUl.addEventListener("mouseout", function(event) {
var elementHovered = event.target;
var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
deleteButton.style.opacity = 0;
});
问题是每当我接近按钮区域时,按钮又消失了。 发生这种情况时,控制台会显示:Cannot read 属性 'style' of null
这就是我创建 Li 的方式:
todoLi.appendChild(view.createDeleteButton(position));
createDeleteButton: function (liId) {
var deleteButton = document.createElement('button');
deleteButton.textContent = 'X';
deleteButton.className = 'deleteButton';
deleteButton.id = 'deleteButton'+liId;
return deleteButton;
我建议使用 mouseenter
和 mouseleave
而不是 mouseover
和 mouseout
事件。
var todosUl = document.getElementById("todoitem1");
todosUl.addEventListener("mouseenter", function(event) {
var elementHovered = event.target;
var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
deleteButton.style.opacity=1;
});
todosUl.addEventListener("mouseleave", function(event) {
var elementHovered = event.target;
var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
deleteButton.style.opacity = 0;
});
<div id='todoitem1' width='100%' style='background-color: yellow'>
<button id="deleteButtontodoitem1" style='opacity: 0'>Delete</button>
</div>
您需要 js 进行此渲染有什么特别的原因吗?下面是一个html/css模型
.delete {
opacity: 0;
}
li:hover > .delete {
opacity: 1;
}
<ul id="toDos">
<li>To Do Item 1<input type="button" class="delete" value="Delete"/></li>
<li>To Do Item 2<input type="button" class="delete" value="Delete"/></li>
<li>To Do Item 3<input type="button" class="delete" value="Delete"/></li>
<li>To Do Item 4<input type="button" class="delete" value="Delete"/></li>
</ul>