我如何以可重用的方式創建這個jquery？

Question

我正在使用Bootstrap popover s和我的數據庫中的動態內容。 在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));
}