Bootstrap 弹出窗口内容未随 JavaScript 更改

Question

我试图在单击“添加到购物车”按钮时更改弹出窗口的内容。单击该按钮时，弹出窗口应通过将 125 乘以所选项目数来显示账单。但即使在单击 添加到购物车 按钮后，弹出窗口仍然显示您的购物车是空的。我在下面添加了代码片段

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 popover 默认不支持动态内容。有 update() 方法，但它只是针对位置而不是内容。

好像没有更新动态内容的方法，所以我用disable()禁用了popover能力，然后重新激活。

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

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.

Bootstrap 弹出窗口内容未随 JavaScript 更改

Bootstrap popover content not getting changed with JavaScript

html

javascript

shopping-cart