4

我正在使用一个名为“bPopup”的轻量级 jQuery 弹出插件。我现在在我的网站上使用它来在单击时加载多个弹出窗口。最近有人告诉我，我的代码效率低下，因为我正在加载带有多个 JavaScript“侦听器”的多个弹出窗口，即：

<script type="text/javascript">
;(function($) {
    $(function() {
        $('#my-button_1').bind('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up_32754925023').bPopup();
        });
    });
})(jQuery);
</script>

<script type="text/javascript">
;(function($) {
    $(function() {
        $('#my-button_2').bind('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up_95031153149').bPopup();
        });
    });
})(jQuery);

^^ 多个 JavaScript“侦听器”。而且，对于弹出窗口：

<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>


<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>

他可能是对的（肯定的），但不确定如何实现这一点，或者这是否可能（他错的可能性很小）。

帮助？谢谢！

4

2 回答 2

2

由于您使用的是 jquery，您应该使用它的on() 方法将单个侦听器附加到父 DOM 元素，并使用选择器参数将事件正确委托给它的子元素（按钮/弹出窗口）。

如果这听起来令人困惑，一个简单的例子可能会有所帮助：

HTML：

<div id="parent">
    <a href="popup1" class="button">Show popup 1</a>
    <div id="popup1" class="popup">1</div>

    <a href="popup2" class="button">Show popup 2</a>
    <div id="popup2" class="popup">2</div>

    <a href="popup3" class="button">Show popup 3</a>
    <div id="popup3" class="popup">3</div>

    <a href="http://www.google.com/" target="_blank">Non-popup link</a>
</div>

JS：

$('#parent').on('click', 'a.button', function (event) {
    event.stopPropagation();
    event.preventDefault();

    var popup = $(this).attr('href');
    $('#'+popup).bPopup();
});

这会在父元素上添加一个事件侦听器，仅当触发事件的子元素与选择器匹配时才会触发（在本例中a.button）。href它通过从属性中检索弹出窗口的 id 来确定要显示的弹出窗口。

您可以在此处查看此示例。

于 2013-02-14T22:05:15.247 回答
0

下面的函数（ myFunction() ）获取被点击的锚点/div 标签的 ID 和要显示的另一个 div 内容的 ID。并为所有弹出模型应用相同的样式。而且它还隐藏了当你打开新弹出窗口时已经打开的旧弹出窗口。您可以更改的所有弹出属性。

这里我只使用了两个弹出窗口，但你可以像这里一样使用它。

<script type="text/javascript">


function myFunction(whId,whtDivContent,e) {
    //var totWidth = $(document).width();
    //var marTop = position.top;
    var elt = $(whId);
    var position = elt.position();
    var marLeft = position.left - 130;

    if(marLeft <= 1) {
        marLeft = 10;
    }

    var openModal_profile ='#openModal_profile';
    var openModal_menu ='#openModal_menu';

    // Prevents the default action to be triggered. 
    e.preventDefault();

    $(whtDivContent).bPopup({
        position: [marLeft, 0] //x, y
        ,opacity: 0.9
        ,closeClass : 'b-close'
        ,zIndex: 2
        ,positionStyle: 'fixed' //'fixed' or 'absolute' 'relative'
        ,follow: [false,false] //x, y
        ,onOpen: function() {
            if(openModal_profile == whtDivContent) {
                $(openModal_menu).bPopup().close();
            }
            else if(openModal_menu == whtDivContent) {
                $(openModal_profile).bPopup().close();
            }

            $(whId).css({'background-color':"#DFDFDF"}); 
        }
        ,onClose: function() { $('.close').click(); $(whId).css({'background-color':""}); }

    });
}



         ;(function($) {
                     // DOM Ready
                    $(function() {
                        // From jQuery v.1.7.0 use .on() instead of .bind()
                        //$(id_menu).on('click',function(e) {}

                        var id_menu = '#id_menu';
                        var openModal_menu ='#openModal_menu';
                        $(id_menu).toggle(function(e) {
                            //$(id_menu).css({'background-color':"#DFDFDF"});
                            myFunction(id_menu,openModal_menu,e);
                        },function(e){
                            //$(id_menu).css({'background-color':""});
                            $('.close').click();
                            $(openModal_menu).bPopup().close();

                        });

                        var id_profile = '#id_profile';
                        var openModal_profile ='#openModal_profile';
                        $(id_profile).toggle(function(e) {
                            //$(id_profile).css({'background-color':"#DFDFDF"});
                            myFunction(id_profile,openModal_profile,e);
                        },function(e){
                            //$(id_profile).css({'background-color':""});

                            $(openModal_profile).bPopup().close();
                        });

                    //ENDS HERE    
                    });
                })(jQuery);
            </script>
于 2013-03-22T10:10:48.130 回答