0

我希望稍微减少此代码。与 jQuery 和 Bootstrap 一样，它相当冗长。我想了解如何使它更干燥，并通过使用我认为将是参数和变量的某种组合的可重用代码的艺术。

注意：这些实际上是相同的，唯一真正的区别是“内容”。我需要使每个实例的内容和“放置”唯一。

实例 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 回答