如何使用.not（）隐藏除被点击的div之外的所有div

时间：2017-03-23 16:33:57

标签： javascript jquery html css

我试图放大一组在div中有缩略图的图像。

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

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

非常感谢任何帮助，谢谢。

＆＃13;
＆＃13; 
$(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');

  }

});
＆＃13; 
.noOpacity {
  opacity: 0;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：2)

您已使用.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 -->

答案 1 :(得分：2)

为什么要将jQuery与纯粹的js混在一起？我们只用jQuery来做。

$(document).ready(function() {
  $('.thumbnail').click(function(e) {
    var image = e.target,
      interval,
      height = 200,
      width = 200,
      z = $(this).css("z-index");
    $(this).css("z-index", z + 10);
    $('#product-container').addClass('disable-click');
    $('.unhidden').not($(this).parent().parent()).addClass('noOpacity');
  });
});
.unhidden {}

.noOpacity {
  opacity: 0;
  transition: .5s ease all;
}
<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 -->

答案 2 :(得分：0)

尝试这样做：

$('.thumbnail').on('click', function(){
    $('.image-container').not(this).closest('.image-container').hide();
})

点击任何缩略图类后，所有缩略图类（＆＃39;此＆＃39;除外）都将被隐藏。

答案 3 :(得分：0)

使用类和ID构建您的功能。 例如：

<div class='thumbnail'>A</div>
<div class='thumbnail'>B</div>
<div class='thumbnail' id='1'>C</div>

尝试此功能：

function showOne(id) {
    $('.thumbnail').not('#' + id).hide();
}

showOne(1);​

希望它有所帮助。

答案 4 :(得分：0)

当你使用.not（$（this））这个你引用的是想象而不是带有'.unihdden'的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).closest('.unhidden')).addClass('noOpacity');
    /*$('.unhidden').addClass("hide");*/

}
相关问题
最新问题