Question

我遇到了一个问题，我在一个表中有超过10个弹出窗口。它们都应该在悬停时显示一个弹出窗口，并且具有类似的html，但内容有一些差异。我认为这是最简单的方法，但我觉得必须有一个更聪明的方法来做到这一点。

是否可以使这个js代码更干？

 $('#static-pop-1').popover({
        'trigger': 'hover',
        'placement': 'bottom',
        'html': true,
        'content': '<div class="static-popover"><span>Hey!</span></div>'
    });

 $('#static-pop-2').popover({
        'trigger': 'hover',
        'placement': 'bottom',
        'html': true,
        'content': '<div class="static-popover"><span>Hey 2!</span></div>'
    });

http://jsfiddle.net/axt63orn/

Answer 1

假设您不希望弹出窗口只是说Hey 1，Hey 2等，但实际上在每个设置中设置了不同的内容，但保持其余设置相同，您可以做

var settings = {
    trigger   : 'hover',
    placement : 'bottom',
    html      : true
}

$('#static-pop-1').popover($.extend({}, settings, {
    content: '<div class="static-popover"><span>Hey!</span></div>'
}));

$('#static-pop-2').popover($.extend({}, settings, {
    content: '<div class="static-popover"><span>Hey 2!</span></div>'
}));

$('#static-pop-3').popover($.extend({}, settings, {
    content: '<div class="static-popover"><span>Hey 3!</span></div>'
}));

FIDDLE

或者您可以使用功能

function setting(text) {
    return {
        trigger   : 'hover',
        placement : 'bottom',
        html      : true,
        content   : '<div class="static-popover"><span>'+text+'</span></div>'
    }
}

$('#static-pop-1').popover(setting('Hey!'));
$('#static-pop-2').popover(setting('Hey 2!'));
$('#static-pop-3').popover(setting('Hey 3!'));

FIDDLE

Answer 2

您可以使用data属性：

<a class="pop" id="static-pop-1" data-mycontent="Hey 1!" title="">Content 1</a>

$('.pop').popover({
    'trigger': 'hover',
    'placement': 'bottom',
    'html': true,
    'content': function(){
        return '<div class="static-popover"><span>'+$(this).data('mycontent')+'</span></div>';
    }
});

JSFiddle

是否有可能使多个Bootstrap popovers更干？

2 个答案: