Question

我正在使用Bootstrap popover来自我的数据库的动态内容。在php中，它为每个popover创建动态类。我的问题是，在jquery中，我是否需要单独调用以触发弹出窗口？

这是我使用jQuery触发弹出窗口的方法 -

$(".image-info-popover-1").popover({
        html : true, 
        placement : 'left',
        trigger: 'hover',
        content: function() {
            return $('.popoverContent-1').html();
        },
        title: function() {
            return $('.popoverTitle-1').html();
        }
}); 

$(".image-info-popover-2").popover({
        html : true, 
        placement : 'left',
        trigger: 'hover',
        content: function() {
            return $('.popoverContent-2').html();
        },
        title: function() {
            return $('.popoverTitle-2').html();
        }
});

$(".image-info-popover-3").popover({
        html : true, 
        placement : 'left',
        trigger: 'hover',
        content: function() {
            return $('.popoverContent-3').html();
        },
        title: function() {
            return $('.popoverTitle-3').html();
        }
}); 

$(".image-info-popover-4").popover({
        html : true, 
        placement : 'left',
        trigger: 'hover',
        content: function() {
            return $('.popoverContent-4').html();
        },
        title: function() {
            return $('.popoverTitle-4').html();
        }
}); 

$(".image-info-popover-5").popover({
        html : true, 
        placement : 'left',
        trigger: 'hover',
        content: function() {
            return $('.popoverContent-5').html();
        },
        title: function() {
            return $('.popoverTitle-5').html();
        }
});

但这不是最好的方法如果我有一个弹出窗口列表来触发。那么有人告诉我以可重复使用的方式做到这一点的好方法吗？

谢谢。

Answer 1

如果你想让它可以重复使用，我会把它放在一个以数字作为参数的函数中。你的功能看起来像这样

var popover_func = function(n) {
    $(".image-info-popover-"+n).popover({
        html : true, 
        placement : 'left',
        trigger: 'hover',
        content: function() {
            return $('.popoverContent-'+n).html();
        },
        title: function() {
            return $('.popoverTitle-'+n).html();
        }
    });
};

你应该可以使用for-loop

来调用它

for (var i=0; i<=5;i++) {
    $(document).ready(popover_func(i));
}

我如何以可重用的方式创建这个jquery？

1 个答案: