H50073：div 循环添加点击事件，swiper循环添加点击事件

1，div 循环添加点击事件

    <div class="video home_video">
        <div class="videolist" vpath="4.mp4" ipath="4.mp4"><img src="../common/images/theme/default/video_icon.png"></div>
    </div>
    <div class="videos">&nbsp;</div>
    <script type="text/javascript">
        $('.videolist').each(function() { //遍历视频列表
            $(this).click(function() { //这个视频被点击后执行
                var vcr = $(this).attr('ipath');
                    var vidwid = document.body.offsetWidth * 0.8 + "px";
                    var vidhig = document.body.offsetWidth * 0.8 / 1.777 + "px";
                    layer.open({
                        type: 1,
                        zIndex:19891014,
                        title: false,
                        closeBtn: 0, //显示关闭按钮
                        shade: 0.7,
                        shadeClose: true,
                        border: 0,
                        // skin: 'shadows',
                        skin: 'myLayskin',
                        area: [vidwid, vidhig], //会出现滚动条
                        anim: 0,
                        scrollbar: false, //防止父页面自动跳到页面顶端
                        content: '<div style="line-height:0; overflow: hidden;"><video id="vid" width="100%" height="100%" controlsList="nodownload  nofullscreen noremoteplayback" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop" src="' + vcr + '" style="width:100%;height:100%;"></video></div>'
                    });
                    $('#vid')[0]['disablePictureInPicture'] = true; //disablePictureInPicture的属性改为true 
            });
        });
    </script>

 

2，swiper循环添加点击事件

        <div class="left left212">
            <div class="biaoyu">茅台王子酒·厚德品质·尊天下</div>
            <div class="swiper-container">
                <div class="video swiper-wrapper" style="">
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233509Ep.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233513NS.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233517lH.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233520q1.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233531rZ.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/2335340Z.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233537kG.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233541U7.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/2335444z.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/26/13602AL.png"></div>
                    <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/26/136076V.png"></div>

                </div>
                <!-- Add Arrows -->
                <div style="right:50px" class="swiper-button-next"></div>
                <div style="left:50px" class="swiper-button-prev"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination" style="bottom:0"></div>
            </div>
            <script>
                var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 1,
                    spaceBetween: 30,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    centeredSlides: true,
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                });



                $('.swiper-slide').each(function() { //遍历视频列表

                    $(this).click(function() { //这个视频被点击后执行
                        console.log("wwiper");

                        // var vcr = $(this).attr('ipath');
                        //     var vidwid = document.body.offsetWidth * 0.8 + "px";
                        //     var vidhig = document.body.offsetWidth * 0.8 / 1.777 + "px";
                        //     layer.open({
                        //         type: 1,
                        //         zIndex:19891014,
                        //         title: false,
                        //         closeBtn: 0, //显示关闭按钮
                        //         shade: 0.7,
                        //         shadeClose: true,
                        //         border: 0,
                        //         // skin: 'shadows',
                        //         skin: 'myLayskin',
                        //         area: [vidwid, vidhig], //会出现滚动条
                        //         anim: 0,
                        //         scrollbar: false, //防止父页面自动跳到页面顶端
                        //         content: '<div style="line-height:0; overflow: hidden;"><video id="vid" width="100%" height="100%" controlsList="nodownload  nofullscreen noremoteplayback" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop" src="' + vcr + '" style="width:100%;height:100%;"></video></div>'
                        //     });
                        //     $('#vid')[0]['disablePictureInPicture'] = true; //disablePictureInPicture的属性改为true 
                    });
                });





            </script>
            <style>

                .swiper-container {
                    width: 100%;
                    height: 70%;
                }

                .swiper-slide img {
                    max-height: 100%
                }

                .swiper-slide {
                    text-align: center;
                    font-size: 18px;
                    height: 100%;
                    /* Center slide text vertically */
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                }

                .swiper-slide-active,.swiper-slide-duplicate-active {}
            </style>

        </div>