javascript - 使用 JQuery .not( ) 淡出除所选内容及其子元素之外的所有 div

Question

我目前有一个图像网格，每个图像都有一个悬停功能，可以更改 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 吗？

Answer 1

.grid div 匹配所有 div，包括grid-item内部的内容。

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

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

请注意我如何将 .grid div 替换为 .grid > div。 请参阅this JS Fiddle .

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