我有一个 <ul>
列出一些 <input>
字段,我需要显示 <span class="delete-link">
将鼠标悬停在实际字段上。
当用户点击 X
关闭按钮,隐藏当前<li>
列表中的元素。
我正在尝试使用 vanilla JavaScript 执行此操作,但我被困在了这一点上。无论我将鼠标悬停在哪个字段中,我的代码都只显示第一个关闭按钮。
HTML
<ul class="social-links-list">
<li class="social-link">
<input type="text" name="" id="" placeholder="http://facebook.com/id">
<span class="delete-link" onclick=''>X</span>
</li>
<li class="social-link">
<input type="text" name="" id="" placeholder="http://facebook.com/id">
<span class="delete-link">X</span>
</li>
<li class="social-link">
<input type="text" name="" id="" placeholder="http://facebook.com/id">
<span class="delete-link">X</span>
</li>
</ul>
CSS
ul {
list-style: none;
}
input[type='text'] {
height: 1rem;
padding: 0.5rem;
margin-bottom: 1rem;
border-radius: 3px;
border: 1px solid #ccc;
}
.delete-link {
color: red;
opacity: 0;
cursor: pointer;
}
JS
var socialField = document.querySelectorAll('.social-link');
socialField.forEach(function(el) {
el.addEventListener('mouseover', function(){
closeBtn.style.opacity = 1;
});
el.addEventListener('mouseout', function(){
closeBtn.style.opacity = 0;
});
var closeBtn = document.querySelector('.social-link .delete-link');
for (i = 0; i < closeBtn.length; i++) {
closeBtn[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
});
检查这个JSFiddle .
最佳答案
就在那里。
只需将您的 .delete-link
元素存储在一个变量 (closeBtn
) 中以便更易于管理,并向其添加一个 click
事件监听器:
var socialField = document.querySelectorAll('.social-link');
socialField.forEach(function(el) {
var closeBtn = el.querySelector('.delete-link');
el.addEventListener('mouseover', function() {
closeBtn.style.opacity = 1;
});
el.addEventListener('mouseout', function() {
closeBtn.style.opacity = 0;
});
closeBtn.addEventListener('click', function() {
closeBtn.parentElement.style.display = 'none';
});
});
ul {
list-style: none;
}
input[type='text'] {
height: 1rem;
padding: 0.5rem;
margin-bottom: 1rem;
border-radius: 3px;
border: 1px solid #ccc;
}
.delete-link {
color: red;
opacity: 0;
cursor: pointer;
}
<ul class="social-links-list">
<li class="social-link">
<input type="text" name="" id="" placeholder="http://facebook.com/id-1">
<span class="delete-link">X</span>
</li>
<li class="social-link">
<input type="text" name="" id="" placeholder="http://facebook.com/id-2">
<span class="delete-link">X</span>
</li>
<li class="social-link">
<input type="text" name="" id="" placeholder="http://facebook.com/id-3">
<span class="delete-link">X</span>
</li>
</ul>
我更改了您输入字段的占位符,以便清楚地表明修改了正确的元素。
关于javascript - 显示每个元素的关闭按钮并使用 JavaScript 隐藏当前元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51089390/