Javascript 正在寻找智能方法来生成此引导/jQuery代码；“干的”；

我希望减少这段代码一点。与jQuery和引导程序一样，它相当冗长。我想学习如何通过使用我认为是参数和变量的某种组合，以及可重用代码的艺术，使它变得更加干燥

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

---

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

$（'popover-2'）。popover({
是的，
触发器：“手动”，
位置：'对'，
容器：'主体'，
内容：'12个月后的EPSVivamus sagittis laouree rutrum faucibus#2
'
})。单击（功能（e）{
$（this.popover（'show'）；
$（“.popover content”）.prepend（“×；”）；
$（'.close'）。单击（函数（e）{
$（'[data toggle=popover]'）。popover（'hide'）；
});
e、 预防默认值（）；
});

---

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

$（'popover-3'）。popover({
是的，
触发器：“手动”，
位置：'对'，
容器：'主体'，
内容：'12个月后的EPSVivamus sagittis laouree rutrum faucibus#2
'
})。单击（功能（e）{
$（this.popover（'show'）；
$（“.popover content”）.prepend（“×；”）；
$（'.close'）。单击（函数（e）{
$（'[data toggle=popover]'）。popover（'hide'）；
});
e、 预防默认值（）；
});

谢谢

函数popoverHelper（id）{
变量元素=$（“#”+id）；
元素。popover({
是的，
触发器：“手动”，
位置：'对'，
容器：'主体'，
内容：'12个月后的EPSVivamus sagittis laouree rutrum faucibus#2
'
})。单击（功能（e）{
$（this.popover（'show'）；
$（“.popover content”）.prepend（“×；”）；
$（'.close'）。单击（函数（e）{
$（'[data toggle=popover]'）。popover（'hide'）；
});
e、 预防默认值（）；
});
}

函数popoverHelper（id）{
变量元素=$（“#”+id）；
元素。popover({
是的，
触发器：“手动”，
位置：'对'，
容器：'主体'，
内容：'12个月后的EPSVivamus sagittis laouree rutrum faucibus#2
'
})。单击（功能（e）{
$（this.popover（'show'）；
$（“.popover content”）.prepend（“×；”）；
$（'.close'）。单击（函数（e）{
$（'[data toggle=popover]'）。popover（'hide'）；
});
e、 预防默认值（）；
});
}

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

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 myClickCallback=函数（e）{
$（this.popover（'show'）；
$（“.popover content”）.prepend（“×；”）；
$（'.close'）。单击（函数（e）{
$（'[data toggle=popover]'）。popover（'hide'）；
});
e、 预防默认值（）；
};

因此，您的代码将是：

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

var commonOptions={
是的，
触发器：“手动”，
位置：'对'，
容器：'主体'
}
var myClickCallback=函数（e）{
$（this.popover（'show'）；
$（“.popover content”）.prepend（“×；”）；
$（'.close'）。单击（函数（e）{
$（'[data toggle=popover]'）。popover（'hide'）；
});
e、 预防默认值（）；
}
$（'#popover-2'）.popover（$.extend（{}，commonOptions{
内容：'12个月后的EPSVivamus sagittis laouree rutrum faucibus#2
'
}))。单击（myClickCallback）；
$（'#popover-3'）.popover（$.extend（{}，commonOptions{
内容：'12个月后的EPSVivamus sagittis laouree rutrum faucibus#2
'
}))。单击（myClickCallback）；

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

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 myClickCallback=函数（e）{
$（this.popover（'show'）；
$（“.popover content”）.prepend（“×；”）；
$（'.close'）。单击（函数（e）{
$（'[data toggle=popover]'）。popover（'hide'）；
});
e、 预防默认值（）；
};

因此，您的代码将是：

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

var commonOptions={
是的，
触发器：“手动”，
位置：'对'，
容器：'主体'
}
var myClickCallback=函数（e）{
$（this.popover（'show'）；
$（“.popover content”）.prepend（“×；”）；
$（'.close'）。单击（函数（e）{
$（'[data toggle=popover]'）。popover（'hide'）；
});
e、 预防默认值（）；
}
$（'#popover-2'）.popover（$.extend（{}，commonOptions{
内容：'12个月后的EPSVivamus sagittis laouree rutrum faucibus#2
'
}))。单击（myClickCallback）；
$（'#popover-3'）.popover（$.extend（{}，commonOptions{
内容：'12个月后的EPSVivamus sagittis laouree rutrum faucibus#2
'
}))。单击（myClickCallback）；

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

var attachHandlers=函数（元素、内容、位置）{
元素.popover（{
是的，
触发器：“手动”，
安置:安置,，
容器：元素，
内容：内容_