0

このコードを少し減らしたいと思っています。jQuery と Bootstrap の場合と同様に、かなり冗長です。より DRY にする方法を学びたいと思います。また、再利用可能なコードの芸術である引数と変数の組み合わせになると思われるものを使用することによって学びたいと思います。

注:これらは事実上同じですが、実際の違いは「内容」のみです。インスタンスごとにコンテンツと「配置」を一意にする必要があります。

インスタンス A

    $('#popover-2').popover({
        html: true,
        trigger: 'manual',
        placement:'right',
        container:'body',
        content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>'
    }).click(function(e) {
        $(this).popover('show');
        $('.popover-content').prepend('<a class="close">&times;</a>');
        $('.close').click(function(e){
            $('[data-toggle=popover]').popover('hide');
        });
    e.preventDefault();
});

インスタンス B

    $('#popover-3').popover({
        html: true,
        trigger: 'manual',
        placement:'right',
        container:'body',
        content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>'
    }).click(function(e) {
        $(this).popover('show');
        $('.popover-content').prepend('<a class="close">&times;</a>');
        $('.close').click(function(e){
            $('[data-toggle=popover]').popover('hide');
        });
    e.preventDefault();
});

ありがとう

4

3 に答える 3

2

次のように、すべての共通オプションを格納するオブジェクトを使用できます。

var commonOptions = {
    html: true,
    trigger: 'manual',
    placement:'right',
    container:'body'
}

および名前付き関数のクリック コールバック:

var myClickCallback = function(e) {
    $(this).popover('show');
    $('.popover-content').prepend('<a class="close">&times;</a>');
    $('.close').click(function(e){
        $('[data-toggle=popover]').popover('hide');
    });

    e.preventDefault();
};

したがって、コードは次のようになります。

var commonOptions = {
    html: true,
    trigger: 'manual',
    placement:'right',
    container:'body'
}

var myClickCallback = function(e) {
    $(this).popover('show');
    $('.popover-content').prepend('<a class="close">&times;</a>');
    $('.close').click(function(e){
        $('[data-toggle=popover]').popover('hide');
    });

    e.preventDefault();
}

$('#popover-2').popover($.extend({}, commonOptions, {
    content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>'
})).click(myClickCallback);


$('#popover-3').popover($.extend({}, commonOptions, {
    content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>'
})).click(myClickCallback);
于 2013-08-22T22:18:02.243 に答える
1

最初に行うことは、イベント処理を関数でラップし、必要な要素とオプションを渡すことです。コンテンツと配置だけが必要なので、それらを別々に渡すことができます。呼び出し元にすべてのプロパティを定義させたい場合は、5 つ以上のパラメーターを持つ関数を使用する代わりに、オブジェクト リテラルを渡します。

var attachHandlers = function(element, content_, placement_) {                       
    element.popover({                                                                
        html: true,                                                                  
        trigger: 'manual',                                                           
        placement: placement_,                                                       
        container: element,                                                          
        content: content_                                                            
    }).click(function(e) {                                                           
        $(this).popover('show');                                                     
        $(this).find('.popover-content').prepend('<a class="close">&times;</a>');    
        $('.close').click((function(elem) {                                          
            return function() { $(elem).popover('hide'); };                          
        })(this));                                                                   
        e.preventDefault();                                                          
    });                                                                              
};                                                                                   

var content2 = '<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus ' +         
    'vel augue laoreet rutrum faucibus #2</p>';                                      
var content3 = '<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus ' +         
    'vel augue laoreet rutrum faucibus #3</p>';                                      

$(document).ready(function() {                                                       
    attachHandlers($('#popover-2'), content2, 'right');                              
    attachHandlers($('#popover-3'), content3, 'bottom');                             
});

x が popover-content クラスを持つすべての要素の先頭に追加されるとバグが発生します。これは、単純に新しいポップオーバーではなく、すべてのポップオーバーに x を先頭に追加することになるためです。

于 2013-08-23T00:33:22.927 に答える
0 
function popoverHelper(id){
    var element = $('#' + id);

    element.popover({
            html: true,
            trigger: 'manual',
            placement:'right',
            container:'body',
            content:'<h2>EPS Trailing 12 Months</h2><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus #2</p>'
        }).click(function(e) {
            $(this).popover('show');
            $('.popover-content').prepend('<a class="close">&times;</a>');
            $('.close').click(function(e){
                $('[data-toggle=popover]').popover('hide');
            });
        e.preventDefault();
    });
}
于 2013-08-22T22:17:53.803 に答える