如何阻止某個類在功能中可點擊

基本上我有多個圖片，當點擊尺寸增大時，同樣當點擊時，頁面變暗並添加關閉按鈕。目前，多個圖像可以一個接一個地點擊，它們全部放大，但是在我的功能中，我希望在其中一個圖像被點擊後阻止其他人被點擊。當關閉按鈕被按下時，他們都可以再次點擊（但我現在不擔心這一點）。如何阻止某個類在功能中可點擊

我試過使用removeEventListener但沒有成功。任何hep將不勝感激。

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); 
} 

});

來源

2017-03-19 Xander

你爲什麼要使用純如果你是媒體鏈接的使用jQuery JavaScript命令？ .bind和.unbind將幫助您順便試一試 – mtizziani

您是否嘗試過使用共享變量？像'imageOpen = true;''放大'方法開始執行時''; – Alpha

@Alpha不，我沒有，但聽起來很有希望，我將如何去實施它？ – Xander

您可以在父主體或HTML上切換一個類，這將有助於附加一個全局類。在JavaScript enlarge功能，您可以添加類似：

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

而且在你的CSS，有這樣的事：

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

來源

2017-03-19 19:33:18 rynomite

謝謝@rynomite這就是我正在尋找，指針事件：沒有不是我以前知道/使用的東西:) – Xander

只需創建一個變量Imgop和對放大事件設置爲false。

然後將基本if語句添加到您不想在圖像放大時工作的代碼部分。

來源

2017-03-19 19:23:42 hut

如何阻止某個類在功能中可點擊

回答

相關問題