问答详情
源自：3-3 同组别数据获取

根据当前组别获取页面中所有相同组别的对象这一步卡住了

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>lightbox开发</title>

<link rel="stylesheet" href="css/lightbox.css">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

</head>

<body>

<h1>1组图片</h1>

<div>

<img 

data-role="lightbox" 

data-source="images/1-1.jpg" 

src="images/1-1.jpg" 

data-group="group-1"

data-id="jiushi"

data-caption="俄罗斯"

width="100" height="100" alt="">

<img data-role="lightbox" data-source="images/1-1.jpg" src="images/1-2.jpg" data-group="group-1" data-id="dfadfa" data-caption="俄罗qerewqr斯" width="100" height="100" alt="">

<img data-role="lightbox" data-source="images/1-1.jpg" src="images/1-3.jpg" data-group="group-1" data-id="qerewqr" data-caption="eqrewr" width="100" height="100" alt="">

</div>

<h1>2组图片</h1>

<div>

<img 

data-role="lightbox" 

data-source="images/1-1.jpg" 

src="images/1-4.jpg" 

data-group="group-2"

data-id="jiushi"

data-caption="俄罗斯"

width="100" height="100" alt="">

<img data-role="lightbox" data-source="images/1-1.jpg" src="images/1-5.jpg" data-group="group-2" data-id="dfadfa" data-caption="俄罗qerewqr斯" width="100" height="100" alt="">

<img data-role="lightbox" data-source="images/1-1.jpg" src="images/1-6.jpg" data-group="group-2" data-id="qerewqr" data-caption="eqrewr" width="100" height="100" alt="">

</div>

<!-- 遮罩 -->

<!-- <div id="G-lightbox-mask"></div> -->

<!-- 弹出层 -->

<!-- <div id="G-lightbox-popup">

<div>

<span class="lightbox-btn lightbox-prev-btn lightbox-prev-btn-show"></span>

<img src="images/2-2.jpg" alt="" width="100%">

<span class="lightbox-btn lightbox-next-btn lightbox-next-btn-show"></span>

</div>

<div>

<div>

<p>图片标题</p>

<span>当前索引：1 of 4</span>

</div>

<span></span>

</div>

</div> -->

<script type="text/javascript">

$(function(){

var lightbox = new LightBox();

})

</script>

</body>

</html>


提问者：请叫我橙子蛋 2017-03-14 16:21

个回答

  • 请叫我橙子蛋
    2017-03-14 16:21:55

    ;(function($){

    var LightBox = function(){

    var self=this;

    //创建遮罩和弹出框

    this.popupMask = $('<div id="G-lightbox-mask">');

    this.popupWin = $('<div id="G-lightbox-popup">');

    //保存body

    this.bodyNode = $(document.body);

    //渲染DOM插入body

    this.readerDOM();

    //准备开发事件委托，获取组数据

    this.groupName = null;

    this.groupData = [];

    this.bodyNode.delegate('.js-lightbox,*[data-role=lightbox]', 'click', function(e) {

    //阻止事件冒泡，不触发到父标签

    e.stopPropagation();

    var currentGroupName = $(this).attr("data-group");

    alert(currentGroupName);

    if(currentGroupName!=self.groupName){

    self.groupName = currentGroupName;

    //获取一组数据根据当前组名

    self.getGroup();

    }

    });

    };

    LightBox.prototype={

    getGroup:function(){

    var self = this;

    //根据当前组别获取页面中所有相同组别的对象

    var groupList = this.bodyNode.find("*[data-group="+this.groupName+"]");

    alert(groupList);

    }

    readerDOM:function(){

    var strDOM = '<div class="lightbox-pic-view">'+

    '<span class="lightbox-btn lightbox-prev-btn"></span>'+

    '<img class="lightbox-image" src="images/2-2.jpg" alt="" width="100%">'+

    '<span class="lightbox-btn lightbox-next-btn"></span>'+

    '</div>'+

    '<div class="lightbox-pic-caption">'+

    '<div class="lightbox-caption-area">'+

    '<p class="lightbox-pic-desc"></p>'+

    '<span class="lightbox-of-index">当前索引：1 of 4</span>'+

    '</div>'+

    '<span class="lightbox-close-btn"></span>'+

    '</div>';

    this.popupWin.html(strDOM);

    this.bodyNode.append(this.popupMask,this.popupWin);

    }

    };

    window["LightBox"]=LightBox;

    })(jQuery);


    0