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) と一致する場合にのみトリガーされます。属性からポップアップの ID を取得して、表示するポップアップを決定しhrefます。

この例の動作はこちらで確認できます。

于 2013-02-14T22:05:15.247 に答える
0

以下の関数（myFunction（））は、クリックされたアンカー/ divタグのIDと、表示されるdivコンテンツの別のIDを取得します。そして、すべてのポップアップモデルに同じスタイルを適用します。また、新しいポップアップを開いたときにすでに開いていた古いポップアップを非表示にします。変更できるすべてのポップアッププロパティ。

ここでは2つのポップアップにのみ使用しましたが、ここで使用したのと同じように多くのポップアップに使用できます。

<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 に答える