更新弹出框的“数据内容”的一部分

Question

我试图找到一个解决方案，我想只更新popover的一部分数据内容。代码示例：

<div class="popover-wrapper">
    <i class="glyphicon glyphicon-question-sign hover_content"
                                           id="popover_help"
                                           data-toggle="popover"
                                           data-placement="right"
                                           data-content="<p>Some static text
                                                        <span class='update-text'>Dynamic text to update</span>
                                                        </p>"
                                           data-html="true">
                                        </i>
</div>
<button class="update-popover" onClick="updatePopoverContent()">Click to update</button>
<script>
    function updatePopoverContent() {
        $('.popover-wrapper .hover_content')???;//and something like attr(‘data-content .update-text’, ‘new text’)
    }
</script>

显示我使用的弹出框：

$(".hover_content").popover({
            trigger: "manual",
            animation: false,
            delay: {
                "hide": 30
            }
        }).on("mouseenter", function() {
            var _this = this;
            $(this).popover("show");
            $(".popover").on("mouseleave", function() {
                $(_this).popover('hide');
            });
        }).on("mouseleave", function() {
            var _this = this;
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        });

是否可以只更改“数据内容”文本的一部分？也许有人可以提供一些建议？提前谢谢！

Answer 1

使用 bootstrap-4，可以更新属性data-content。

注意：您不能使用 jquery 的 .data("content", newValue) 更新 .data 值，因为 popper 似乎每次都直接读取属性，而不是遵守数据约定。

$("#popover_help").attr("data-content", replacementHtml);

要仅更新 update-text 部分，您可以读取 HTML，对其进行解析，使用 jquery 对其进行更改，然后将其写回为 HTML：

var html = $("#popover_help").data("content");
var parsed = $("<div/></div>").html(html);
parsed.find("span").text("Updated text");
$("#popover_help").attr("data-content", parsed.html());

如果你有多个，你可以将它应用到一个 .class 来更新所有，这里是一个例子。

$(function () {
  $('[data-toggle="popover"]').popover()
})

function updatePopoverContent() {
    $(".hover_content").each(function() {
     var html = $(this).data("content");
     var parsed = $("<div/></div>").html(html);
     parsed.find("span").html("<strong>Updated</strong> text");
     $(this).attr("data-content", parsed.html());
     // doesn't update if currently shown, so hide then show if desired
     $(this).popover("hide");
     //$(this).popover("show");
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.bundle.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet">

<br/>
<div class="popover-wrapper">
    <i class="glyphicon glyphicon-question-sign hover_content"
                                           id="popover_help"
                                           data-toggle="popover"
                                           data-placement="right"
                                           data-title="Example"
                                           data-content="<p>Some static text
                                                        <span class='update-text'>Dynamic text to update</span>
                                                        </p>"
                                           data-html="true">
                                           click me
                                        </i>
</div>
<hr/>
<button class="update-popover" onClick="updatePopoverContent()">Click to update</button>