Javascript 单击以在图像上触发覆盖

我知道如何在CSS中用鼠标悬停在图像上显示覆盖。我知道如何在JS中切换div

现在我想要的是通过点击图像本身，在图像上显示一个覆盖图。我担心悬停可能有点干扰

有什么想法吗

我也尝试了全屏覆盖，但这对响应性来说并不容易

---

谢谢

JQuery是解决这个问题的最佳解决方案，但是您也可以只使用JavaScript来解决这个问题

首先，由于您希望在单击时触发此操作，因此应该去掉CSS中的悬停属性。当前您有以下悬停：

.photo-img:hover .photo-caption {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10%;
    background-repeat: no-repeat;
    background-position: center center;
}

将其更改为名为“photo caption show”的自定义类，以便在单击时切换到此类：

.photo-caption-show {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10%;
    background-repeat: no-repeat;
    background-position: center center;
}

现在，您需要编写一个函数来在单击时切换该类。用JavaScript编写以下函数：

var toggleShow = function(){
    var element = document.querySelector(".photo-caption");
    element.classList.toggle("photo-caption-show");
}

上面的函数基本上获取带有类photo标题的DOM元素，并切换其类

现在唯一剩下的就是触发这个方法。您可以通过所需的div来执行此操作，在本例中，使用class a-post的div：

<div class="a-post" onclick="toggleShow()">

如果您想将这个方法分配给每一个具有特定类的元素，而不是将onclick写入每一个元素，那么您仍然可以按照如下方式使用JavaScript来实现它，不过JQuery是实现它的最佳方式。在定义了toggleClass函数之后，输入以下代码

var elements= document.getElementsByClassName("a-post");
for(var i = 0; i < elements.length; i++) {
    var element= elements[i];
    element.onclick = toggleClass;
}

var elements=document.getElementsByClassName（“a-post”）；
对于（var i=0；i

请将您的代码发布在这里的JSFIDLE中，以便我们能够提供帮助。非常感谢您，此解决方案非常有效！现在你知道我是否可以使用PostID类来触发这个脚本了吗？因为在同一个屏幕上肯定会有多个图像page@GeeB，我编辑了这篇文章。据我所知，您希望在单击特定类时调用此方法，对吗？我为此添加了解决方案，请参阅最后一部分。谢谢，是的，我们的想法是能够在所有照片帖子上触发此Javascript。因此，我认为我应该使用“photo post”类而不是“a-post”，但是如果页面上有多个照片帖子，会有冲突吗？如果我使用通用类，JS如何知道我正在触发右边图像上的div？这就是为什么我想知道如何触发posted