引导弹出窗口动态更改内容 [英] bootstrap popover change content dynamically

问题描述

Click me First按钮代表现实生活中的购买，单击它会触发product_buy_now().它填充以下数组:

Click me First button represents purchase in real life, on it's click product_buy_now() is fired.. it fills following arrays:

news_from_to
number_of_news
news_price_data

设置数据后，触发

触发inbox_open()设置弹出窗口的标题&数据内容属性..它确实应该工作.. 不使用动态填充数组的示例代码: https://jsfiddle.net/HopeLess/0gbcatL3/ 检查它只是看看结果应该是什么样子. 感谢您预先提供的所有帮助(:

after data is set inbox_open() is fired which set up popover's title & data-content attributes.. it really should work.. sample code that doesn't use dynamically filled arrays: https://jsfiddle.net/HopeLess/0gbcatL3/ check it just to see how result should look like. Thanks for all help in advance (:

<!-- HTML -->
<button class="btn btn-sm btn-danger" style="margin: 40px 0 0 0;" onclick="product_buy_now()">Click Me First</button>
<button id="inbox" class="btn btn-primary btn-sm" style="margin: 40px 0 0 400px;" data-toggle="popover" data-placement="left" data-html="true" title="" data-content="">inbox</button>

<!-- Script -->
<script>
// inbox
var inbox = document.getElementById("inbox");
var inbox_news = document.getElementById("inbox_news");

var poH = document.createElement("span");
var poC = document.createElement("span");

var news_from_to = [];
var number_of_news = [];
var news_price_data = [];

// inbox.open
function inbox_open(news_from_to, number_of_news, news_price_data) {
 console.log("Opening Executed!");
 console.log("");

 console.log("Craft Data:");
 console.log(news_from_to);
 console.log(number_of_news);
 console.log(news_price_data);
 console.log("");

 for(var i = 0; i < news_from_to.length; i++) {
  // create header/content components
  var b = document.createElement("button");
  var c = document.createElement("span");

  b.innerHTML = (i + 1);
  b.className = "poH";

  c.className = "poC";
  c.style = "display: none;";

  // set price
  var news_price_of_items = 0;
  for(var j = news_from_to[i]; j < (news_from_to[i] + number_of_news[i]); j++) { news_price_of_items += news_price_data[j]; }

  // insert data
  c.innerHTML = "You Bought: <br />"+
                number_of_news[i]+ " items <br />"+
                "for $"+ news_price_of_items;

  // store popover header/content
  poH.appendChild(b);
  poC.appendChild(c);
  }
 inbox.setAttribute("title", poH.innerHTML);
 inbox.setAttribute("data-content", poC.innerHTML);

 console.log("Craft as Crafted:")
 console.log(poH.innerHTML);
 console.log(poC.innerHTML);
 }

// run inbox_open()
//inbox_open(news_from_to, number_of_news, news_price_data);

// aloud BS 4 popover to run
$(document).ready(function() { $('[data-toggle="popover"]').popover(); });


/* PRODUCT BUY NOW */

// data for Buy Now
var now_cart_item = [];
var now_cart_in_item = [];

// product.buy_now
function product_buy_now() {
 // inbox.update
 if(news_from_to.length == 0) {
  console.log("if branch:");
  console.log("");
  news_from_to = [0];
  number_of_news = [1];
  /* news_price_data = [product_price_data[now_cart_item[0]][now_cart_in_item[0]]]; */
  news_price_data = [10];

  inbox_open(news_from_to, number_of_news, news_price_data);
  }
 else {
  console.log("else branch:");
  console.log("");
  news_from_to.push(news_price_data.length);
  number_of_news.push(1);
  /* news_price_data.push(product_price_data[now_cart_item[0]][now_cart_in_item[0]]); */
  news_price_data = [20];

  inbox_open(news_from_to, number_of_news, news_price_data);
  }

 // mail purchase info
 //now_mail();

 // empty data holders for next purchase
 now_cart_item = [];
 now_cart_in_item = [];
 }

/* JQUERY */

// BS 4 popover header buttons.addEventListener
$('#inbox').on('shown.bs.popover', function () {
 // get header/content classes
 var poHs = document.getElementsByClassName("poH");
 var poCs = document.getElementsByClassName("poC");

 for(var i = 0; i < poHs.length; i++) {
  popover_hardCodeHandler(i);
  }
 poHs[0].className += " seen active";
 poCs[0].style = "display: block;";
 }
);

function popover_hardCodeHandler(i) {
 var poHs = document.getElementsByClassName("poH");
 var poCs = document.getElementsByClassName("poC");

 poHs[i].onclick = function() {
  // remove active class from all poHs and set display none for all poCs
  for(var j = 0; j < poHs.length; j++) { poHs[j].className = poHs[j].className.replace(" active", ""); }
  for(var j = 0; j < poCs.length; j++) { poCs[j].style = "display: none;"; }

  // add seen and active class to current element
  this.className += " seen active";

  // set content for current element
  poCs[i].style = "display: block;";
  }
 }
</script>

推荐答案

我的问题的答案是，应该在 inbox_open()中使用 inbox.setAttribute("数据原始标题"，poH.innerHTML); 因为这是BS 4在这种情况下寻找标题的地方(:

Answer to my question is that inside inbox_open() you should use inbox.setAttribute("data-original-title", poH.innerHTML); because that is where BS 4 looks for title in this kind of situations (:

这篇关于引导弹出窗口动态更改内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！