页面加载时将元素data-bs-content属性值替换为data-my-data属性值的实现问题

嘿，我瞅了你的代码，发现俩关键问题导致功能没跑起来，咱们一步步把它修好：

问题1：jQuery对象误用了原生DOM方法 #

你在attr()的回调里写了$(this).getAttribute('data-my-data')，但getAttribute是原生DOM元素才有的方法，jQuery对象没法直接用这个。得换成jQuery的attr()方法，或者用更顺手的data()方法来拿自定义属性值。

问题2：Popover初始化顺序搞反了 #

你先把Popover组件初始化了，之后才去改data-bs-content属性。这时候Popover已经把一开始的default data缓存起来了，后面改属性也同步不到已经初始化好的Popover实例里。所以必须先修改属性，再初始化Popover，顺序不能乱！

修正后的完整代码 #

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {
          // 第一步：先替换所有popover元素的data-bs-content
          $('[data-bs-toggle="popover"]').attr("data-bs-content", function() {
            // 用jQuery的attr方法获取data-my-data的值
            let myData = $(this).attr('data-my-data');
            // 👉 这里可以加你后续需要的处理逻辑，比如格式化、拼接内容
            // 示例：myData = `【处理后】${myData}`;
            return myData;
          });

          // 第二步：基于更新后的属性初始化Popover
          const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
          popoverTriggerList.forEach(popoverTriggerEl => {
            new bootstrap.Popover(popoverTriggerEl, {
              container: 'body',
              trigger: 'click'
            });
          });
        });
    </script>

</head>

<body>
<br/>
<a href="#"
   data-bs-toggle="popover"
   data-bs-content="default data"
   data-my-data="my data 1"
>
    CLICK ME 1
</a>
<br/>
<br/>
<a href="#"
   data-bs-toggle="popover"
   data-bs-content="default data"
   data-my-data="my data 2"
>
    CLICK ME 2
</a>

</body>
</html>

额外提醒 #

你说之后要对data-my-data做处理，就把逻辑写在return myData;之前就行。比如要给内容加个前缀、转义特殊字符或者拼接HTML，直接修改myData变量就OK，完全不影响后续的Popover初始化。

这样改完之后，页面加载时会先把所有popover触发元素的内容替换好，再初始化组件，点击的时候就能看到my data 1和my data 2的内容啦～

备注：内容来源于stack exchange，提问作者Steve Maring