寻找聪明的方法使这个引导/jQuery代码“干”
寻找聪明的方法使这个引导/jQuery代码“干”
提问于 2013-08-22 22:12:28
我希望将这个代码减少一点。与往常一样，对于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">×</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">×</a>');
$('.close').click(function(e){
$('[data-toggle=popover]').popover('hide');
});
e.preventDefault();
});谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-22 22:18:02
您可以使用一个存储所有公共选项的对象，如下所示：
var commonOptions = {
html: true,
trigger: 'manual',
placement:'right',
container:'body'
}和命名函数中的单击回调：
var myClickCallback = function(e) {
$(this).popover('show');
$('.popover-content').prepend('<a class="close">×</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">×</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);Stack Overflow用户
发布于 2013-08-23 00:33:22
要做的第一件事是将事件处理包装在一个函数中，传入所需的元素和选项。因为我们只需要内容和位置，我们可以单独传递这些内容。如果我们想让调用者定义所有属性，那么我们需要传递一个对象文本，而不是一个带有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">×</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类时，会有一个bug，因为您最终会将x放在所有popover的前面，而不仅仅是新的。
Stack Overflow用户
发布于 2013-08-22 22:17:53
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">×</a>');
$('.close').click(function(e){
$('[data-toggle=popover]').popover('hide');
});
e.preventDefault();
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18391655
复制相关文章
相似问题
腾讯云开发者
