在图像单击上显示/隐藏 div 不起作用 [英] Show/Hide div on image click not working

问题描述

如果你去 http://oandg.co.uk.s156312.gridserver.com/#work 并选择一个投资组合项目并单击更多"，您将看到一个图像和一个角落带有小i"的文本框.

If you go to http://oandg.co.uk.s156312.gridserver.com/#work and select a portfolio item and click 'More' you will see an image and a text box with a little 'i' in the corner.

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

I would like to make it so if you clicked the little 'i' the text box would disappear and if you clicked it again it would show.

我试过了，但什么也没做:

I tried this but it does nothing:

$(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>

有什么想法吗?

推荐答案

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

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

只是为了对此添加一些解释，您之前在.openBoxButton"类的每次点击时都添加了一个点击处理程序 - 现在我没有在您的页面中搜索该类，但将它放在该函数之外可以防止避免重复添加事件处理程序.

Just to add some explanation of this, you were previously adding a click handler on every click of the ".openBoxButton" class - now I did NOT search for that class in your page but placing this outside that function prevents the event hanlder from being repeatedly added.

根据评论进行我使用开发人员工具进行了测试，并且可以正常工作.#colorBox 似乎不起作用 - 可能添加/删除了循环或其他内容.

EDIT based on comment: I tested using developer tools and it works. #colorBox does not seem to work - likely added/removed cycle or something.

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

这篇关于在图像单击上显示/隐藏 div 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！