Question

我希望稍微减少这些代码。和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();
});

由于

Answer 1

您可以使用存储所有常用选项的对象，如下所示：

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);

Answer 2

要做的第一件事是将事件处理包装在一个函数中，传入所需的元素和选项。由于我们只需要内容和位置，我们可以单独传递它们。如果我们想让调用者定义我们想要在对象文字中传递的所有属性，而不是具有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');                             
});

当使用popover-content类将x添加到所有元素之前有一个错误，因为你最终会将x添加到所有popover而不仅仅是新的popoff。

Answer 3

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();
    });
}

寻找智能方法使这个Bootstrap / jQuery代码“干”

3 个答案: