如何使用.not（）隱藏除單擊的div外的所有div

Question

我正在嘗試放大在div內具有縮略圖的一組圖像。

當我單擊應用於圖像的.thumbnail類時，圖像會放大，但我希望所有其他產品消失。

我嘗試添加一個帶有display的類：除了，因為傳遞到該函數的圖像位於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() .closest()目標父元素，然后才能使用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 --> 

Answer 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 --> 

Answer 3

嘗試這樣做：

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

單擊任何縮略圖類別后，所有縮略圖類別（“ this”除外）都將被隱藏。

Answer 4

使用類和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);​

希望能幫助到你。

Answer 5

當您使用.not（$（this））時，您所引用的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");*/

}