Bootstrap 弹出框内容不会被 JavaScript 改变

Question

当单击添加到购物车的按钮时，我正在尝试更改弹出框的内容。 单击按钮时，弹出窗口应通过将 125 乘以所选项目数来显示账单。但即使在点击添加到购物车按钮后，弹出框仍然显示您的购物车是空的。 我在下面添加了代码sn-p

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})


document.getElementsByClassName("adcart")[0].addEventListener('click',addcart);

document.getElementsByClassName("btnminus")[0].addEventListener('click',decrement);

document.getElementsByClassName("btnplus")[0].addEventListener('click',increment);


/*** These two functions (increment ,decrement) are for working of plus and minus buttons***/

function decrement( ){
  var x =parseInt(document.getElementsByClassName("form-control")[0].value);
  if (x!=0)
  {document.getElementsByClassName("form-control")[0].value= parseInt(document.getElementsByClassName("form-control")[0].value)-1;}
}
function increment( ){
document.getElementsByClassName("form-control")[0].value=  parseInt(document.getElementsByClassName("form-control")[0].value)+1;}


/** This is the function I have written to update the content of popover**/


function addcart(){
document.getElementsByClassName("poper")[0].dataset.bsContent="YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value)*125;}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<button type="button" class="btn btn-lg poper" data-bs-toggle="popover" title="CART" data-html="true" data-bs-Content="Your cart is empty"> popover</button>



  <div class="quantity d-inline-block">
    <input class="btn btnminus d-inline" type="button" value="-" >
     <input  class="form-control d-inline itemnumber" value='0' aria-label="Username" aria-describedby="addon-wrapping">
    <input class="btn btnplus d-inline" type="button" value="+" >
  </div>

  <button type="button" class="btn btn-lg adcart">Add to cart</button>

</div>

Answer 1

默认情况下，Bootstrap 弹出框不支持动态内容。有update() 方法，但它只是用于位置而不是内容。

好像没有办法更新动态内容，那我就用disable()把弹窗功能关闭了再重新激活。

要更新内容，您必须在将商品添加到购物车时进行。示例代码如下。

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})


document.getElementsByClassName("adcart")[0].addEventListener('click', addcart);

document.getElementsByClassName("btnminus")[0].addEventListener('click', decrement);

document.getElementsByClassName("btnplus")[0].addEventListener('click', increment);


/*** These two functions (increment ,decrement) are for working of plus and minus buttons***/

function decrement() {
    var x = parseInt(document.getElementsByClassName("form-control")[0].value);
    if (x != 0) {
        document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) - 1;
    }
}

function increment() {
    document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) + 1;
}


/** This is the function I have written to update the content of popover**/


function addcart() {
    document.getElementsByClassName("poper")[0].dataset.bsContent = "YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value) * 125;

    popoverTriggerList.map(function(popoverTriggerEl) {
        popover = bootstrap.Popover.getOrCreateInstance(popoverTriggerEl);
        popover.hide();// hide, in case that it is opening.
        popover.disable();
        new bootstrap.Popover(popoverTriggerEl);
    })
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<button type="button" class="btn btn-lg poper" data-bs-toggle="popover" title="CART" data-html="true" data-bs-Content="Your cart is empty"> popover</button>



<div class="quantity d-inline-block">
    <input class="btn btnminus d-inline" type="button" value="-">
    <input class="form-control d-inline itemnumber" value='0' aria-label="Username" aria-describedby="addon-wrapping">
    <input class="btn btnplus d-inline" type="button" value="+">
</div>

<button type="button" class="btn btn-lg adcart">Add to cart</button>

See it on jsfiddle.