如何使用 bootstrap 中的 JavaScript 在弹出窗口中设置属性 5

Question

我正在尝试使用 bootstrap 5 中的 Java 脚本在弹出窗口中设置 html 属性。但是我不能。

这是我的弹出代码：

<button type="button" class="btn btn-secondary mx-3" id="popcart" data-bs-html="true" 
      data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs- 
      content="Bottom popover">Cart(<span id="cart">0</span>) </button>

Java脚本代码：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popcart"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl, 

    {
      html: true
    })
})
document.getElementById("popcart").setAttribute('data-bs-content','<h5>Cart</h5>')

Answer 1

只需将 setAttribute 移到所有代码之前，例如：（请参阅下面的更新）

document.getElementById("popcart").setAttribute('data-bs-content', '<h5>Cart</h5>');
var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popcart"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl,

    {
      html: true
    })
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button type="button" class="btn btn-secondary mx-3" id="popcart" data-bs-html="true" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs- content="Bottom popover">Cart(<span id="cart">0</span>) </button>

我错过了一个巨大的错误，id 必须是唯一的，而不是使用 data-id，例如：

document.querySelector('[data-id="popcart"]').setAttribute('data-bs-content', '<h5>Cart</h5>');
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-id="popcart"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl,

    {
      html: true
    })
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button type="button" class="btn btn-secondary mx-3" data-id="popcart" data-bs-html="true" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">Cart(<span id="cart">0</span>) </button>

Answer 2

您可以使用 spread 将 querySelectorAll 集合转换为数组：

   [...document.querySelectorAll(someSelector)].map(...)

但是

ID 必须是唯一的

const cart = document.getElementById("popcart");
cart.setAttribute('data-bs-content', '<h5>Cart</h5>');
var popoverList = new bootstrap.Popover(cart, { html: true });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button type="button" class="btn btn-secondary mx-3" id="popcart" data-bs-html="true" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs- content="Bottom popover">Cart(<span id="cart">0</span>) </button>

如果您有多个，请使用 class

const popoverList = [...document.querySelectorAll(".popcart")].map(but => {
  but.setAttribute('data-bs-content', '<h5>Cart</h5>');
  return new bootstrap.Popover(but, {
    html: true
  })
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<button type="button" class="popcart btn btn-secondary mx-3" data-bs-html="true" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs- content="Bottom popover">Cart(<span id="cart">0</span>) </button>
<button type="button" class="popcart btn btn-secondary mx-3" data-bs-html="true" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs- content="Bottom popover">Cart(<span id="cart">0</span>) </button>

如何使用 bootstrap 中的 JavaScript 在弹出窗口中设置属性 5

How can I setattribute in popover by using JavaScript in bootstrap 5

html

javascript

bootstrap-5