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 }

Answer 2

只需创建一个变量Imgop，并在放大事件中将其设置为false。

然后将基本if语句添加到图像被放大时不想工作的代码部分。

如何阻止某个类在函数

2 个答案: