使用 JQuery .not() 淡出除选定的所有 div 和它的孩子答案

【问题标题】：using JQuery .not( ) to fade out all divs apart from the selected and it's children使用 JQuery .not() 淡出除选定的所有 div 和它的孩子
【发布时间】：2015-06-08 11:26:38
【问题描述】：

我目前有一个图像网格，每个图像都有一个悬停功能，可以改变 div 的不透明度。所以图片是背景图片，信息是grid-item中的一个div。

  <div class="grid">
    <div class="grid-item">
      <div class="image-rollover">
        <div class="title">
          Image title text
        </div>
      </div>
      <div class="info">
        Image information text
      </div>
    </div>
  </div>

我有一个函数可以使每个网格项与被单击的项分开：

$(".grid-item").click(function() {
  var selected = this;
  $(selected).children(".image-rollover").css("opacity", "1");
  $(function() {
    $('.grid div').not(selected).fadeOut(200);
  });
});

我希望除单击的图像之外的所有图像都消失，并且我希望该单击图像的翻转状态保持不变。我有前半部分，但尽管我将 CSS 设置为 1，但悬停状态消失了。

我觉得和.not()有关系，好像.not()没有包含那个div里面的所有子元素？？

任何人都可以建议选择除了选定的所有 div 和所有它的子元素之外的所有 div 的东西吗？

【问题讨论】：

标签： javascript jquery fadeout children

【解决方案1】：

.grid div 匹配所有divs，包括那些内部你的grid-item。

如果您只匹配直接子级，它将按预期工作。

$(".grid-item").click(function() {
  var selected = this;
  $('.grid>div').not(selected).fadeOut(200);
});

注意我是如何将.grid div 替换为.grid > div 的。见this JS Fiddle。

我还删除了单击处理程序中的匿名函数，鉴于您发布的上下文，这是不必要的。

【讨论】：