Same script for mutiple div classes

Question

I'd like a way to use the same script for multiple object because I have to replicate this for 50 times.

What the script does is that when you click on a button it should open a popup style image with a frame in it for every product with its gallery.

I'm currently using this :

<script>
        $(document).ready(function(){
            $("#popup").click(function(){
                $("#overlay").fadeIn(500);
                $("#overlay_div").fadeIn(500);
            });
            $("#close_botton").click(function(){
                $("#overlay_div").fadeOut(500);
                $("#overlay").fadeOut(500);
            });
        });  
    </script>
    <script>
        $(document).ready(function(){
            $("#popup1").click(function(){
                $("#overlay1" ).fadeIn(500);
                $("#overlay_div1").fadeIn(500);
            });
            $("#close_botton1").click(function(){
                $("#overlay_div1").fadeOut(500);
                $("#overlay1").fadeOut(500);
            });
        });  
    </script>
            <script>
        $(document).ready(function(){
            $("#popup2").click(function(){
                $("#overlay2").fadeIn(500);
                $("#overlay_div2").fadeIn(500);
            });
            $("#close_botton2").click(function(){
                $("#overlay_div2").fadeOut(500);
                $("#overlay2").fadeOut(500);
            });
        });  
    </script>

<div id="overlay"></div>
        <div id="overlay_div">
        <div id="close_botton">X</div>
        <iframe src="galleria.html"; scrolling="auto" width="800px" height="700px">b</iframe>
        </div>

Duplication question [jquery-selector-for-id-starts-with-specific-text](http://stackoverflow.com/questions/23223526/jquery-selector-for-id-starts-with-specific-text) — Gaurav Kumar Singh, Mar 05 '17 at 17:45
@mplungjan - Solution provided by you is also there in duplicate question as an alternate option which is recommended. — Gaurav Kumar Singh, Mar 05 '17 at 17:53
@Gaurav - I see it is. Closed as duplicate. The missing bit is navigating to the things to show and hide — mplungjan, Mar 05 '17 at 17:55
@Alessandro, we need to see the popup button if you want the complete solution — mplungjan, Mar 05 '17 at 18:06

mplungjan · Answer 1 · 2017-03-05T17:57:20.573

You need a class and you can access the others relative to the object

<div class="overlay"></div>
    <div class="overlay_div">
    <div class="close_botton">X</div>
    <iframe src="galleria.html"; scrolling="auto" width="800px" height="700px">b</iframe>
</div>

using - for now - I need to see the popup button code too - if the popup is next to, before the div, $(this).next() would find the div

$(function(){
  $(".popup").click(function(){
    $(this).parent().find(".overlay").fadeIn(500);
    $(this).parent().find(".overlay_div").fadeIn(500);
  });
  $(".close").click(function(){
    $(this).parent().find(".overlay").fadeOut(500);
    $(this).parent().find(".overlay_div").fadeOut(500);
  });
});

change parent().find to whatever matches the button's access to the overlays - show HTML to allow us to see what the selectors should be - for example $(this).closest("div.productContainer") instead

Same script for mutiple div classes

1 Answers1