Question

我有一个<ul>列表，其中包含一些<input>字段，我需要在实际字段上的鼠标上显示<span class="delete-link">元素。

当用户单击X关闭按钮时，从列表中隐藏当前的<li>元素。

我正在尝试使用原始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。

Answer 1

很不错。

只需将您的.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>

为了清楚起见，我更改了输入字段的占位符。正确的元素已被修改。

Answer 2

您的问题出在您的closeBtn选择器上。您当前编写的方式实际上并不是为父级选择子元素。实际上，它正在获取与您的选择器匹配的第一项，而不是您想要的所有项。

您想要做的是专门为span child创建一个变量。

var closeBtn = el.querySelectorAll(".delete-link")[0];

这将特别获得当前元素的.delete-link范围。完成此操作后，您可以删除for循环，这完全没有必要。

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
    var closeBtn = el.querySelectorAll(".delete-link")[0];

    el.addEventListener('mouseover', function(){
        closeBtn.style.opacity = 1;
    });
    el.addEventListener('mouseout', function(){
        closeBtn.style.opacity = 0;
    });

    closeBtn.addEventListener("click", function() {
       this.parentElement.style.display = 'none';
    })
});

工作小提琴：http://jsfiddle.net/0u7jxtfk/2/

Answer 3

通过使用CSS隐藏/显示删除链接，可以显着简化代码。您也可以直接从社交链接节点引用删除链接。

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
  var closeBtn = el.querySelector('.delete-link');
  closeBtn.addEventListener("click", function() {
    el.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;
}

.social-link .delete-link {
  opacity: 0;
}

.social-link:hover .delete-link {
  opacity: 1;
}

<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>

显示每个项目的关闭按钮，并使用JavaScript隐藏当前项目

3 个答案:

很不错。