javascript - 多个 div 类的相同脚本

标签 javascript css

<分区>

我想要一种对多个对象使用相同脚本的方法,因为我必须将其复制 50 次。

该脚本的作用是,当您单击一个按钮时,它应该为每个产品及其图库打开一个带有框架的弹出式图像。

我目前正在使用这个:

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

最佳答案

您需要一个类,并且您可以访问与该对象相关的其他类

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

使用 - 现在 - 我还需要查看弹出按钮代码 - 如果弹出按钮紧挨着 div 之前,$(this).next() 会找到 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);
  });
});

parent().find 更改为与按钮对覆盖层的访问相匹配的任何内容 - 显示 HTML 以允许我们查看选择器应该是什么 - 例如 $(this).closest ("div.productContainer") 而不是

关于javascript - 多个 div 类的相同脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42611697/

相关文章:

css - 媒体 ="print"外部链接不起作用

javascript - 加载 Highcharts 文档时 DOM 节点计数增加 (Chrome)

html - CSS淡入背景

javascript - 传递并附加 JavaScript 窗口方法?

javascript - D3 : Invalid attribute [object Object]

javascript - 以弧形拖动元素的最简单方法是什么?

css - 3 个嵌套 div - 父级固定宽度,基于内容的左右宽度,空中心宽度等于差异?

javascript - resizeFix 重新初始化 slider

javascript - jQuery 剪贴板插件不适用于动态添加的元素

javascript - 如何使用 javascript 将必填字段设置为 false