隐藏每个项目的内容答案

【问题标题】：Hide Content on each item隐藏每个项目的内容
【发布时间】：2017-11-16 23:08:07
【问题描述】：

如何隐藏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>

【问题讨论】：

您的代码似乎已经这样做了。
你的意思是隐藏除了输入的元素之外的所有其他元素吗？

标签： javascript jquery foreach each jquery-events

【解决方案1】：

Each 中的 Each 不需要。

$('.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>

【讨论】：

【解决方案2】：

用这个替换你的代码：

$(function(){
    $('.view').hover(
      function() {
        // on hover
        $(this).find('.quickview').hide();
      }, function() {
        // on remove hover
        $(this).find('.quickview').show();
      }
    );  
});

这将在特定.view div 悬停时隐藏.quickview div，并在删除悬停时再次显示它。

【讨论】：