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

Question

我正在使用 Bootstrap popover 和来 self 的数据库的动态内容。在 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循环来调用它

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