启用bootstrap弹出式广告并将它们保持在开放状态

Question

我发现此结果（How can I keep bootstrap popover alive while the popover is being hovered?）适用于我的一个弹出式广告，但我有多个由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

如果你想的行为适用于所有popovers，你可以通过它们data-toggle属性选择。如果您的data-属性在存储内容URL时具有一致的名称，则还可以从常用功能轻松找到并加载它。

<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); 
    }); 
});