多个div类的相同脚本

时间:2017-03-05 17:36:08

标签: javascript css

我想为多个对象使用相同的脚本,因为我必须复制50次。

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

我目前正在使用这个:

#include <stdio.h>
#include <stdlib.h>

typedef struct Node Node;
struct Node {
    int value;
    Node* next;
};

void print(Node* list);

int main()
{
    Node* n1 = malloc(sizeof *n1);
    Node* n2 = malloc(sizeof *n2);

    n1->value = 4;
    n1->next = n2;
    n2->value = 5;
    n2->next = NULL;

    print(n1);
    return 0;
}

void print(Node* list)
{
    Node* p;
    p = list;
    while (p != NULL)
    {
        printf("%d ", p->value);
        p = p->next;
    }
}
<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>

1 个答案:

答案 0 :(得分:1)

您需要一个类,您可以访问相对于该对象的其他人

<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")而不是