javascript - 如何阻止类在函数中可点击

Question

基本上我有多个图像，单击时尺寸会增加。此外，单击时页面会变暗并添加关闭按钮。目前，可以依次单击多个图像，它们都会放大，但在我的功能中，我想在其中一个图像放大后阻止其他图像被单击。当按下关闭按钮时，它们都可以再次单击(但我现在不担心这一点)。

我尝试使用removeEventListener，但没有成功。 任何帮助将不胜感激。

HTML:

<div class="product">
   <div class="image-container">
   <img src="assets/home-bg.jpg" class="thumbnail">
   </div>    
</div>

<div class="product">
    <div class="image-container">
    <img src="assets/enchilada.jpg" class="thumbnail">
    </div>    
</div>

<div class="product">
     <div class="image-container">
     <img src="assets/quesadilla.jpg" class="thumbnail">
     </div>    
</div>                                

CSS:

.thumbnail {
    position: relative;
    height: 200px;
    width: 200px;
    cursor: pointer;
    z-index: 1200;
}         

JS:

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

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

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

    $(this).css("z-index", z + 10);  //increase the z-index of just the image which has been selected by 10

    $("#close-button").css("visibility", "visible");
    $("#dimmed-cover").css("visibility", "visible");
    $("#close-button").click(function () {
        $("#close-button").css("visibility", "hidden");
        $("#dimmed-cover").css("visibility", "hidden");
        });

  interval = setInterval(function() {
    height += 6.666;
    width += 6.666;

    if(height >= 600 && width >= 600) {
      height = 600;
      width = 600;
      clearInterval(interval);
    }

    image.style.height = height + 'px';
    image.style.width = width + 'px';
  }, 16.667);
}

});

Answer 1

您可以在父正文或 html 上切换类，这将有助于附加全局类。在您的 javascript enlarge 函数中，您可以添加如下内容:

$('body').toggleClass('image-no-click');

在你的CSS中，有类似的内容:

.image-no-click .thumbnail { pointer-events: none }