在Popover中动态将徽章组件背景更改为自定义颜色

编程问答 2022-08-13

问题描述

我试图创建一个徽章元素，当单击应用程序中的某项时，该元素会显示在弹出窗口中，并且根据该项的color属性动态设置其背景色。

我尝试使用下面的代码进行此操作，但是，我无法获得更换颜色的提示。

var badgeHtml = '<span class="badge badge-pill" style="background-color:'+clickedItem.colour+' !imporant">'+clickedItem.name+'</span>'

clickedItem.colour是一个十六进制字符串值，例如＃32a852

任何建议将不胜感激！

编辑

我正在尝试在这样创建的弹出窗口中显示此徽章：

$(element).popover('dispose');
$(element).popover({
    sanitize: false,container: element,placement: 'top',animation: false,html: true,title: item.name + '<span class="badge badge-pill" style="background-color:'+item.colour+' !imporant;">'+item.property+'</span>',});
$(element).popover('show');

解决方法

首先，您在跨度中误写了!important。

然后，请在下面搜索由BS 4制作的弹出式窗口的结果。

您可以在此处找到所有详细信息：https://getbootstrap.com/docs/4.0/components/popovers/

我还从注入的popover中删除了js var，因为您没有提供它们，但是我想，您自己替换它不会有任何问题。

$(function () {
  $('[data-toggle="popover"]').popover({
    sanitize: false,container: 'body',placement: 'top',animation: false,html: true,title: '',content: 'ITEM NAME <div class="badge badge-pill" style="background-color:red !important;">PROPERTY</div>',template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div style="height:500px; width: 100%; padding-top:100px;">
  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover">Click to toggle popover</button>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

最诚挚的问候，

bootstrap-4twitter-bootstrap