如何在JavaScript中使用for循环批量创建Bootstrap Popover？

你的问题出在document.querySelector('.servicePOP')只会选中第一个匹配的元素，所以只有第一个卡片能触发Popover。要批量处理所有带servicePOP类的卡片，只需要获取所有匹配元素，再通过循环逐个初始化Popover即可。

修改后的核心脚本 #

替换你原来的<script>部分为以下代码即可实现批量初始化：

// 获取所有带servicePOP类的元素
const servicePOPs = document.querySelectorAll('.servicePOP');

// 用for循环遍历每个元素，初始化Popover
for (let i = 0; i < servicePOPs.length; i++) {
  new bootstrap.Popover(servicePOPs[i], {
    sanitize: false,
    html: true,
    content: '<button type="button" class="btn btn-primary">My Button</button>'
  });
}

更简洁的forEach写法（推荐） #

如果喜欢更简洁的语法，也可以用forEach遍历：

document.querySelectorAll('.servicePOP').forEach(el => {
  new bootstrap.Popover(el, {
    sanitize: false,
    html: true,
    content: '<button type="button" class="btn btn-primary">My Button</button>'
  });
});

完整可运行代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.rtl.min.css">
    <title>Document</title>
</head>
<body>
<div style="height:200px"></div>
<div class="container">
    <div class="row">
        <div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
            <div class="card position-relative">
                <div class="d-block card-icon">
                    <img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
                </div>
                <div class="card-body">
                    <a href="#" class=" text-decoration-none text-dark ">
                        <h5 class="card-title ">Title 1</h5>
                    </a>
                    <p>A short description</p>
                    <a href="#" class="btn btn-primary">More Details</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
            <div class="card position-relative">
                <div class="d-block card-icon">
                    <img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
                </div>
                <div class="card-body">
                    <a href="#" class=" text-decoration-none text-dark ">
                        <h5 class="card-title ">Title 2</h5>
                    </a>
                    <p>A short description</p>
                    <a href="#" class="btn btn-primary">More Details</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
            <div class="card position-relative">
                <div class="d-block card-icon">
                    <img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
                </div>
                <div class="card-body">
                    <a href="#" class=" text-decoration-none text-dark ">
                        <h5 class="card-title ">Title 3</h5>
                    </a>
                    <p>A short description</p>
                    <a href="#" class="btn btn-primary">More Details</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
// 批量初始化所有servicePOP元素的Popover
document.querySelectorAll('.servicePOP').forEach(el => {
  new bootstrap.Popover(el, {
    sanitize: false,
    html: true,
    content: '<button type="button" class="btn btn-primary">My Button</button>'
  });
});
</script>
</body>
</html>

这样不管后续新增多少个带servicePOP类的卡片，脚本都会自动为它们初始化Popover，不需要手动逐个编写代码。

内容的提问来源于stack exchange，提问作者Mahmoud Khoravi