在所有位置启用引导弹出框，并在悬停时保持打开状态

Question

我发现这个结果(如何在悬停弹出窗口时保持引导弹出框处于活动状态？(适用于我的一个弹出框，但我有多个由 ID 针对的弹出框事件，我想知道如何将其应用于所有这些事件或每个弹出窗口。下面是我正在使用的一些代码片段的示例。

这是 HTML：

<label class="checkbox">
<input type="checkbox" value="" />Body of Delusion<a data-bodyofdelusion="{% static 'pathfinder/html/sleepingGoddess/bodyOfDelusion.html' %}" data-toggle="popover" id="bodyOfDelusion">&#9660;</a>
</label>
<label class="checkbox">
<input type="checkbox" value="" />Call the Soul's Blade<a data-callthesoulsblade="{% static 'pathfinder/html/sleepingGoddess/callTheSoulsBlade.html' %}" data-toggle="popover" id="callTheSoulsBlade">&#9660;</a>
</label>

这是javascript：

function loadContent(callTheSoulsBlade) {
return $('<div>').load(callTheSoulsBlade, function (html) {
parser = new DOMParser();
doc = parser.parseFromString(html, "text/html");
return doc.querySelector('h4').outerHTML + doc.querySelector('body').outerHTML;
})
};
$(document).ready(function () {
$("#callTheSoulsBlade").popover({
trigger: "hover focus",
container: 'body',
html: true,
content: function () {
return loadContent($(this).data('callthesoulsblade'))
}
});
});
function loadContent(bodyOfDelusion) {
return $('<div>').load(bodyOfDelusion, function (html) {
parser = new DOMParser();
doc = parser.parseFromString(html, "text/html");
return doc.querySelector('h4').outerHTML + doc.querySelector('body').outerHTML;
})
};
$(document).ready(function () {
$("#bodyOfDelusion").popover({
trigger: 'manual',
container: 'body',
html: true,
animation: false,
content: function () {
return loadContent($(this).data('bodyofdelusion'))
}
}).on("mouseenter", function () { // This is the section from the link I provided.
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
});

Answer 1

如果要将行为应用于所有弹出框，可以通过其data-toggle属性选择它们。如果存储内容 URL 的data-属性具有一致的命名，则还可以从通用函数轻松找到并加载它。

<label class="checkbox">
<input type="checkbox" value="" />Body of Delusion<a data-staticurl="{% static 'pathfinder/html/sleepingGoddess/bodyOfDelusion.html' %}" data-toggle="popover" id="bodyOfDelusion">&#9660;</a>
</label>
<label class="checkbox">
<input type="checkbox" value="" />Call the Soul's Blade<a data-staticurl="{% static 'pathfinder/html/sleepingGoddess/callTheSoulsBlade.html' %}" data-toggle="popover" id="callTheSoulsBlade">&#9660;</a>
</label>

$(document).ready(function () {
$('[data-toggle="popover"]').popover({
trigger: 'manual',
container: 'body',
html: true,
animation: false,
content: function () {
return loadContent($(this).data('staticurl'))
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
});