javascript - 隐藏每个项目的内容

Question

如何隐藏 mouseenter 上每个 DIV 的内容？

var quick = document.querySelectorAll(".quickview");
var quickwrap = document.querySelectorAll(".view");


quickwrap.forEach(div => div.addEventListener("mouseenter", function(){
    $.each(quick, function(){
      $(this).hide()
    })
  })
);

div{
  padding: 15px;
  text-align: center;
  background: rgba(50, 190, 100, 0.7);
  transition: 0.2s ease-in-out;
  opacity: 1;
  bottom: 50px;
  color: white; 
}
.view{
  width:300px;
  height:100px;
  position:relative;
  top:100px;
  left:20px;
  margin:1em;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view">
  <div class="quickview">  
    <span class="viewtxt">  Quick View</span>
  </div>
</div>
<div class="view">
  <div class="quickview">  
    <span class="viewtxt">  Quick View</span>
  </div>
</div>
<div class="view">
  <div class="quickview">  
    <span class="viewtxt">  Quick View</span>
  </div>
</div>
<div class="view">
  <div class="quickview">  
    <span class="viewtxt">  Quick View</span>
  </div>
</div>

Answer 1

不需要 Each 内的 Each。

$('.view') 将选择具有类 View 的所有元素，并使用 .on 将您定义的事件添加到每个元素。

要隐藏当前 mouseenter 元素的内容，只需使用 $(this).find('.quickview').hide();

$('.view').on('mouseenter', function(){
   $(this).find('.quickview').hide();
});

div{
  padding: 15px;
  text-align: center;
  background: rgba(50, 190, 100, 0.7);
  transition: 0.2s ease-in-out;
  opacity: 1;
  bottom: 50px;
  color: white; 
}
.view{
  width:300px;
  height:100px;
  position:relative;
  top:100px;
  left:20px;
  margin:1em;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view">
  <div class="quickview">  
    <span class="viewtxt">  Quick View</span>
  </div>
</div>
<div class="view">
  <div class="quickview">  
    <span class="viewtxt">  Quick View</span>
  </div>
</div>
<div class="view">
  <div class="quickview">  
    <span class="viewtxt">  Quick View</span>
  </div>
</div>
<div class="view">
  <div class="quickview">  
    <span class="viewtxt">  Quick View</span>
  </div>
</div>