javascript - 如何使用 .not() 隐藏除被单击的 div 之外的所有 div

Question

我正在尝试放大一组在 div 内有缩略图的图像。

当我单击应用于图像的 .thumbnail 类时，图像会放大，但我希望所有其他产品都消失。

我尝试添加一个带有 display: none 的类，但是因为传递给函数的图像位于 div 内部，所以它仍然没有显示(我认为这就是原因)，所以我尝试使用不透明度，但没有成功。我将在下面添加相关代码。

任何帮助将不胜感激，谢谢。

$(document).ready(function() {
  var images = document.querySelectorAll('.thumbnail');


  images.forEach(function(image) {
    image.addEventListener('click', enlarge);
  });

  function enlarge(e) {
    var image = e.target,
      interval,
      height = 200,
      width = 200,
      z = $(this).css("z-index"); //Obtain the current z-index of the image which has been clicked
    /*thisProduct = */

    $(this).css("z-index", z + 10); //increase the z-index of just the image which has been selected by 10
    $('#product-container').addClass('disable-click'); //Stops other products from being enlarged whilst another is
    $('.unhidden').not($(this)).addClass('noOpacity');

  }

});

.noOpacity {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product-container">
  <div class="product-wrapper">
    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/home-bg.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Mexican Nachos - £6.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/enchilada.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Enchiladas - £10.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/quesadilla.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Quesadilla - £10.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/shrimp.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Shrimp Stir Fry - £10.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/tacos.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Tacos - £5.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/tortilla.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Tortillas - £7.99
      </div>
    </div>
  </div>
</div>
<!-- Product container -->

Answer 1

您已使用 .thumbnail 元素附加事件处理程序，而不是 .unhidden，因此您需要使用 .closest()/来定位父元素.parents() 然后可以使用 not() 。所以使用

$('.unhidden').not($(this).closest('.unhidden')).addClass('noOpacity');

而不是

$('.unhidden').not($(this)).addClass('noOpacity');

$(document).ready(function() {
  var images = document.querySelectorAll('.thumbnail');


  images.forEach(function(image) {
    image.addEventListener('click', enlarge);
  });

  function enlarge(e) {
    var image = e.target,
      interval,
      height = 200,
      width = 200,
      z = $(this).css("z-index"); //Obtain the current z-index of the image which has been clicked
    /*thisProduct = */

    $(this).css("z-index", z + 10); //increase the z-index of just the image which has been selected by 10
    $('#product-container').addClass('disable-click'); //Stops other products from being enlarged whilst another is
    $('.unhidden').not($(this).closest('.unhidden')).addClass('noOpacity');

  }

});

.noOpacity {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product-container">
  <div class="product-wrapper">
    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/home-bg.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Mexican Nachos - £6.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/enchilada.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Enchiladas - £10.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/quesadilla.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Quesadilla - £10.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/shrimp.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Shrimp Stir Fry - £10.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/tacos.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Tacos - £5.99
      </div>
    </div>

    <div id="product" class="unhidden">
      <div class="image-container">
        <img src="assets/tortilla.jpg" class="thumbnail">
      </div>
      <div class="product-text">
        Tortillas - £7.99
      </div>
    </div>
  </div>
</div>
<!-- Product container -->