javascript - 循环内第一个 div 的弹出内容

Question

弹出窗口在整个循环中显示相同的内容。下面是循环内的代码。

 <div class="title popupReturn"><%= item.name %></div>

    <div id="tableContent" style="display:none">
        <div>
            <div class="panel panel-default">
                <div class="panel-heading"><%= item.name %></div>
                <div class="panel-body form-inline dept1">
                    <a class="btn btn-default" id="001">Item</a>
                </div>
            </div>
        </div>
    </div>
  </div>

这是页内脚本调用。循环外

<script>
        $().ready(function(e) {

            var popupEvent = function() {

            }

            $('.popupReturn').hunterPopup({
                width: '320px',
                height: '200px',
                title: "jQuery hunterPopup Demo",
                content: $('#tableContent'),
                event: popupEvent
            });

        });
    </script>

Answer 1

首先:ID 必须是唯一的。其次:我建议您为每个元素添加一个数据属性，如下所示:

<div class="title popupReturn" data-id="tableContent1">Item1</div>

这样，您的 popupEvent 函数就可以获取当前单击的元素，因此它可以动态更改猎人弹出内容，例如:

 var popupEvent = function () {
    var id = $('.popupReturn.clicked').data('id');
    this.content.replaceWith($('#' + id).html());
}

$('.popupReturn').on('click', function(e) {
    $('.popupReturn.clicled').removeClass('clicked');
    $(this).addClass('clicked');
}).hunterPopup({
    width: '320px',
    height: '200px',
    title: "jQuery hunterPopup Demo",
    event: popupEvent
})

(function($) {
    $.hunterPopup = function(box, options) {
        var box = $(box);
        var defaults = {
            title: 'jQuery hunterPopup Demo',
            placement: 'left',
            width: '100%',
            height: '100%',
            content: $('<div><h3>jQuery hunterPopup Demo</h3></div>'),
            event: closePopup
        };
        var obj = $.extend(defaults, options);

        var template = $('<div class="Hunter-pop-up" id="Hunter-pop-up"><a class="close"><i class="glyphicon glyphicon-remove"></i></a><div class="arrow"></div><h3 class="title"></h3><div id="Hunter_pop_wrap" class="Hunter-wrap"></div></div>');
        var title = $('.title', template);
        var pop_wrap = $('#Hunter_pop_wrap', template);

        $(document).click(function() {
            template.remove();
        });

        box.click(function(event) {
            event.preventDefault();
            event.stopPropagation();
            $('.Hunter-pop-up').remove();
            var _this = $(this);
            var offset = _this.offset();
            var top = offset.top + _this.outerHeight() + 15;
            if(obj.placement == 'left') {
                template.css({
                    'left': offset.left,
                    'top': top
                });
            } else {
                template.addClass("Hunter-pop-up-right");
                template.css({
                    'left': offset.left - obj.width + _this.width() / 2,
                    'top': top
                });
            }

            buildPopup();
            $('body').append(template);
            $('.Hunter-pop-up').click(function(event) {
                event.stopPropagation();
            });

            //调用弹出层内容注册的事件。
            obj.event();

        });

        function buildPopup() {
            buildPopupContent();
            closePopup();
        };

        function buildPopupContent() {
            title.text(obj.title);

            //构造弹出层的内容
            var _content = obj.content;
            _content.show();
            pop_wrap.children().remove();
            pop_wrap.append(_content);
            pop_wrap.width(obj.width);
            pop_wrap.height(obj.height);
        };

        function closePopup() {
            template.on('click', '.close', function(event) {
                event.preventDefault();
                event.stopPropagation();
                template.remove();
            });
        }
    };

    $.fn.extend({
        hunterPopup: function(options) {
            options = $.extend({}, options);
            this.each(function() {
                new $.hunterPopup(this, options);
            });
            return this;
        }

    });
})(jQuery);

//
// ----------------------------------------
//

var popupEvent = function () {
    var id = $('.popupReturn.clicked').data('id');
    this.content.replaceWith($('#' + id).html());
}
  
$('.popupReturn').on('click', function(e) {
    $('.popupReturn.clicled').removeClass('clicked');
    $(this).addClass('clicked');
}).hunterPopup({
    width: '320px',
    height: '200px',
    title: "jQuery hunterPopup Demo",
    event: popupEvent
})

.Hunter-pop-up {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 1px;
    font-family: Microsoft YaHei;
    background-color: #ffffff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 2px solid #cccccc;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.Hunter-pop-up:before,
.Hunter-pop-up:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    position: absolute;
    left: 20px;
    z-index: 999999;
}
.Hunter-pop-up-right:before,
.Hunter-pop-up-right:after {
    left: auto;
    right: 20px;
}
.Hunter-pop-up:before {
    border-color: transparent transparent #f5f5f5;
    top: -17px;
    z-index: 9999999;
}

.Hunter-pop-up:after {
    border-color: transparent transparent #c9cbce;
    top: -20px;
}
.Hunter-pop-up ul {
    list-style: none;
}
.Hunter-pop-up ul li {
    display: inline-block;
    position: relative;
    margin: 4px;
    cursor: pointer;
}
.Hunter-pop-up p {
    font-weight: bold;
    padding: 0 4px;
    margin-top: 4px;
    margin-bottom: 10px;
}
.Hunter-pop-up .line {
    width: 340px;
    margin: 0 auto;
    margin-top: 4px;
    border-bottom: 1px solid #d8d8d8;
}
.Hunter-pop-up .close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
}
.Hunter-pop-up .title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
}
.Hunter-pop-up .Hunter-wrap {
    position: relative;
    background: #ffffff;
    padding: 8px;
    overflow: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="title popupReturn" data-id="tableContent1">Item1</div>

    <div id="tableContent1" style="display:none">
        <div>
            <div class="panel panel-default">
                <div class="panel-heading">Item1</div>
                <div class="panel-body form-inline dept1">
                    <a class="btn btn-default" id="001">Item</a>
                </div>
            </div>
        </div>
    </div>
    <div class="title popupReturn" data-id="tableContent2">Item2</div>

    <div id="tableContent2" style="display:none">
        <div>
            <div class="panel panel-default">
                <div class="panel-heading">Item2</div>
                <div class="panel-body form-inline dept1">
                    <a class="btn btn-default" id="002">Item</a>
                </div>
            </div>
        </div>
    </div>
    <div class="title popupReturn" data-id="tableContent3">Item3</div>

    <div id="tableContent3" style="display:none">
        <div>
            <div class="panel panel-default">
                <div class="panel-heading">Item3</div>
                <div class="panel-body form-inline dept1">
                    <a class="btn btn-default" id="003">Item</a>
                </div>
            </div>
        </div>
    </div>
</div>