我正在为我公司的网站创建一个传记页面,我希望将其格式化为员工个人资料图片中的一个。然后可以单击每张图片,这将使屏幕褪色为灰色,并显示被点击者的个人资料的叠加层。但是,我的代码存在的问题是,它会使用内的每个人的姓名进行硬编码。我如何才能在不使用头部内部使用“ person1”,“ person2”等的情况下使它工作,而仅使用“ person”(或者,如果你们知道的话,可以使用一些更好的方法)?

<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
        <script>
            $(document).ready(function(){
                $("#showperson1").click(function(){
                    $('.person1').show("fast");
                });
                $("#hideperson1").click(function(){
                    $('.person1').hide("slow");
                });
                $("#showperson2").click(function(){
                    $('.person2').show("fast");
                });
                $("#hideperson2").click(function(){
                    $('.person2').hide("slow");
                });
            });
        </script>
        <style>
            #overlay {
                display: none; /* ensures it’s invisible until it’s called */
                position: fixed; /* makes the div go into a position that’s absolute to the browser viewing area */
                left: 50%;
                top: 50%;
                padding: 25px;
                padding-right: 250px;
                box-shadow: 0px 0px 40px #222222;
                border: 10px gray;
                border-radius: 25px;
                background: #ffffff;
                height: 500px;
                width: 500px;
                z-index: 100;
                margin-top: -275px; /* negative half the size of height */
                margin-left: -400px; /* negative half the size of width */
                font-family:"Trebuchet MS", Helvetica, sans-serif;
            }
            #fade {
                display: none;
                position: fixed;
                left: 0%;
                top: 0%;
                background-color: gray;
                -moz-opacity: 0.5;
                opacity: .50;
                filter: alpha(opacity=50);
                width: 100%;
                height: 100%;
                z-index: 90;
            }
        </style>
    </head>
    <body>
        <table style="width:600">
            <tr align="center">
                <td align="center">
                    <img height="100px" width="100px"
                        src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg"
                        id="showperson1"
                    >
                    <div class="person1" id="fade"></div>
                    <div class="person1" align="left" id="overlay">
                        <img src="http://cdns2.freepik.com/free-photo/close-button-with-rounded-corners_318-9865.jpg"
                            id="hideperson1"
                            height="25"
                            width="25"
                            style="position:absolute; right:15px; top:15px;"
                        >
                        <img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg"
                            height="175px"
                            width="175px"
                            style="position:absolute; right:50px; top:75px;"
                        >
                        <a href="vcard.vcf">
                            <img src="http://www.aianwpr.org/wp-content/uploads/2012/08/vcard_icon.png"
                                height="30px"
                                width="30px"
                                style="position:absolute; right:180px; top:275px;"
                            >
                        </a>
                        <a href="mailto:someone@example.com?Subject=Hello%20again" target="_parent">
                            <img src="http://stsff.org/wp-content/uploads/email-icon.png"
                                height="30px"
                                width="30px"
                                style="position:absolute; right:180px; top:322px;"
                            >
                        </a>
                        <a href="tel:+1-800-123-4567">
                            <img src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Other-Phone-icon.png"
                                height="30px"
                                width="30px"
                                style="position:absolute; right:180px; top:367px;"
                            >
                        </a>
                        <p style="position:absolute; left:625px; top:265px;">
                            <font size="2">
                                vCard<br/><br/>
                                Email<br/><br/>
                                Phone<br/><br/>
                            </font>
                        </p>
                        <p>
                            biography for person1
                        </p>
                    </div>
                    <br/><strong>Person1</strong><br/>Person1 Title
                </td>
                <td align="center">
                    <img height="100px" width="100px"
                        src="http://www.firstpersonarts.org/wp-content/uploads/2010/08/Soledad-new-headshot-7-073.jpg"
                        id="showperson2"
                    >
                    <div class="person2" id="fade"></div>
                    <div class="person2" align="left" id="overlay">
                        <img src="http://cdns2.freepik.com/free-photo/close-button-with-rounded-corners_318-9865.jpg"
                            id="hideperson2"
                            height="25"
                            width="25"
                            style="position:absolute; right:15px; top:15px;"
                        >
                        <img src="http://www.firstpersonarts.org/wp-content/uploads/2010/08/Soledad-new-headshot-7-073.jpg"
                            height="175px"
                            width="175px"
                            style="position:absolute; right:50px; top:75px;"
                        >
                        <a href="vcard.vcf">
                            <img src="http://www.aianwpr.org/wp-content/uploads/2012/08/vcard_icon.png"
                                height="30px"
                                width="30px"
                                style="position:absolute; right:180px; top:275px;"
                            >
                        </a>
                        <a href="mailto:someone@example.com?Subject=Hello%20again" target="_parent">
                            <img src="http://stsff.org/wp-content/uploads/email-icon.png"
                                height="30px"
                                width="30px"
                                style="position:absolute; right:180px; top:322px;"
                            >
                        </a>
                        <a href="tel:+1-800-123-4567">
                            <img src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Other-Phone-icon.png"
                                height="30px"
                                width="30px"
                                style="position:absolute; right:180px; top:367px;"
                            >
                        </a>
                        <p style="position:absolute; left:625px; top:265px;">
                            <font size="2">
                                vCard<br/><br/>
                                Email<br/><br/>
                                Phone<br/><br/>
                            </font>
                        </p>
                        <p>
                            biography for person2
                        </p>
                    </div>
                    <br/><strong>Person1</strong><br/>Person1 Title
                </td>
            </tr>
        </table>
    </body>
</html>

最佳答案

使用类和html结构代替。

id="show/hideperson#"替换为class="showperson" and class="hideperson",然后使用jQuery根据html结构选择元素:

$(document).ready(function () {
    $(".showperson").click(function () {
        $(this).parent().find('.person').show("fast");
    });
    $(".hideperson").click(function () {
        $(this).parent().parent().find('.person').hide("slow");
    });
});


小提琴:http://jsfiddle.net/t53qf1hc/1/

10-05 20:51
查看更多