Javascript 在图像上显示/隐藏div单击“不工作”

如果您转到并选择一个公文包项目，然后单击“更多”，您将看到一个图像和一个文本框，其中在角落处有一个小“i”

我想这样做，如果你点击小'我'的文本框会消失，如果你再次点击它会显示

我试过了，但没有效果：

$(function() {
$(".openBoxButton").click(function() {
      $('#colorbox').fadeIn(1200);
       $.colorbox(); 
         $('.rsABlock img.info').click(function(e) {
          e.preventDefault();
          $('.caption-background').toggleClass('hidden');
       });
  });
});

HTML:

<!-- Slide One -->
<div id="simple-slider-one" class="royalSlider rsDefault" style="width: 100%;">
    <a class="rsImg" href="images/Froosh/froosh1.jpg">  
        <div class="rsABlock">
            <img src="images/info.svg" alt="" class="info">
            <div class="caption-background">
                <h4>What we did for them</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio deserunt nostrum illum dolor obcaecati eaque ipsam! Distinctio, ipsa accusamus saepe temporibus ex pariatur possimus quidem sapiente obcaecati labore iusto.</p>
        </div>
        </div>
    </a>
    <a class="rsImg" href="images/Froosh/froosh2.jpg">  
        <div class="rsABlock">
            <img src="images/info.svg" alt="" class="info">
            <div class="caption-background">
                <h4>What we did for them</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio deserunt nostrum illum dolor obcaecati eaque ipsam! Distinctio, ipsa accusamus saepe temporibus ex pariatur possimus quidem sapiente obcaecati labore iusto.</p>
        </div>
        </div>
    </a>

---

有什么想法吗？

是的。。。您可以使用CSS实现这一点：

<!-- HTML -->
<div class="container">
    <img src="http://placekitten.com/285/275" class="portfolio" alt="">
    <div class="mask">
         <h2>Froosh</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nostrum     porro iste excepturi vel ducimus cumque minima rem voluptates cum!</p>
    </div>
</div>

有一个JSFIDLE：

取决于您在.mask元素上添加一些样式

编辑：为了对此进行解释，您以前在.openBoxButton类的每次单击上都添加了一个单击处理程序-现在我没有在您的页面中搜索该类，但将其放在该函数的外部可以防止事件handler被重复添加

基于评论编辑：我使用开发人员工具进行了测试，它可以正常工作。色盒似乎不起作用-可能是添加/删除了循环或其他内容

 $(document).on('click', 'img.info', function (e) {
    e.preventDefault();
    $('.caption-background').toggleClass('hidden');
});

---

在这里也提供HTML。一旦你的问题在你的URL上得到解决，这对其他人就没有帮助了。太本地化了。toggleClass'hidden'是不必要的，除非有一些我不知道的特殊CSS规则-$'.caption background'。toggle也一样。你可以使用其他答案中提供的JS使IE/旧浏览器后退…我不确定你是否理解我的问题-缩略图工作正常。当你将鼠标悬停在缩略图上，然后单击“更多”，你就会看到我在说什么。这与公文包图像无关，这些图像很好-进入网站将鼠标悬停在缩略图上，然后单击红色圆圈，上面写着“更多”-然后你就会看到我的问题是的，我的朋友，单击JSFIDLE中的“更多”按钮。转到您提到的站点并将此代码放在控制台中，如果这是您想要的，那么我将更新我的答案：$'img.info'。单击，函数{var caption=$this.siblingsdiv.caption-background；caption.toggle；}.csscursor，pointer；谢谢，但这似乎也不起作用-因为这是在初始加载后加载到DOM中的，这会停止代码的运行吗？找到初始加载中存在的另一个锚，而不是.rsABlock类-最坏的情况是$document.onen即使我在DOM中始终使用colorbox作为锚，它也不起作用，因为.caption background和img.info是否在加载DOM后添加？

$(function () {
    $(".openBoxButton").click(function () {
        $('#colorbox').fadeIn(1200);
        $.colorbox();
    });

    $('.rsABlock').on('click', 'img.info', function (e) {
        e.preventDefault();
        $('.caption-background').toggleClass('hidden');
    });
});

 $(document).on('click', 'img.info', function (e) {
    e.preventDefault();
    $('.caption-background').toggleClass('hidden');
});