Question

（我发现有一个类似的问题here，但我不认为答案适用于我，或者如果确实如此，我不明白如何实施它。

首先，我应该说我不是程序员或设计师，我使用Bootstrap（称为Grayscape）制作的开源模板来建立我自己的网站。含义：我不知道我在做什么。但我会尽我所能，尽量读书并学习。

但是，我无法解决这个问题。您会在我的页面的test version上看到第三部分中有书籍封面（它是一页的布局）。我希望每本书的封面都有popovers。第一个封面的弹出工作。但只有第一个有效。尽管代码对其他代码是相同的（到目前为止，我只为下两本书的封面提供了代码）。

在JS脚本中我有这个初始化：

$(document).ready(function(){
$(function() {
$('.bookovers').popover();
});

然后在我最后一个身体标签前面的底部：

$('#popover').popover();

然后围绕我有弹出窗口的物品：

<a id="popover" class="btn" rel="popover" data-content="Summary text."
              title="title text"
              data-html="true"></a>

我不会很困惑。然而，这是我需要做的最后一件事，才能让这个页面设置和运行，我只是不能为我的生活找出或找到为什么只有第一个popover工作。我在页面的某些文本中进行了实验并做了一个弹出窗口，再次，只有第一个文本工作（换句话说，第一个，第一个封面，现在是第二个，不再工作））。任何帮助将不胜感激，但请注意我可能需要非常具体的指导。

谢谢！

Answer 1

而不是：

<a id="popover" class="btn" rel="popover" data-content="Summary text."
          title="title text"
          data-html="true"></a>

试试这个：

<a class="btn popover" rel="popover" data-content="Summary text."
          title="title text"
          data-html="true"></a>

而不是：

$("#popover").popover();

试试这个：

$(".popover").popover();

这背后的原因是因为每个id被认为是仅分配给该特定项的唯一属性。通常会将相同的ID分配给多个元素，结果会有不同的结果，而且可能无法正常工作。

然而，

类是基于多个元素可以组合在一起的想法。通过添加类“popover”，我们可以指向这些特定元素或使用特定选择器选择它们。什么是选择器？那么当你这样做：

$("#popover").popover();

'#popover'告诉文档查找名为“popover”的ID。类似地

$(".popover").popover();

'。popover'告诉文档查找名为“popover”的类

Answer 2

如果向要作为弹出窗口的每个元素添加一个类（例如'myclass'），并在具有该类的所有对象上调用popover（），则每个对象都有自己的弹出窗口，单击时会出现该弹出窗口。这就是我用下面的HTML和JavaScript所做的。

此外，您的JavaScript中似乎有一个重复的$(function() {。

带有多个弹出式窗口的HTML（请注意“myclass”类）：

<a class="btn myclass" rel="popover" data-content="Summary text." title="title text" data-html="true">Popover</a>

<a class="btn myclass" rel="popover" data-content="Summary text." title="title text" data-html="true">Popover</a>

<a class="btn myclass" rel="popover" data-content="Summary text." title="title text" data-html="true">Popover</a>

JavaScript（请注意$('.myclass')选择器）：

$(document).ready(function () {
    $('.bookovers').popover(); // Only necessary if you actually have objects with class "bookovers"
    $('.myclass').popover(); // Makes popover for all elements with class "myclass"
});

演示：

http://jsfiddle.net/BenjaminRay/3ear7ea6/

PS - 如果您将类“myclass”（或您选择的名称）添加到已经具有“预订”类别的元素中，则可以从JavaScript中删除行$('.bookovers').popover();。

Answer 3

您是否可以将ID更改为每个特定的弹出窗口，而不是为所有弹出窗口都具有相同的功能？

也许＃popover1＃popover2等？

只是一个想法..

编辑：例如我有一个Bootstrap Modal，它只会弹出第一个，直到我将id更改为Modal1，Modal2等。然后这就行了。

只有第一个弹出窗口正在工作

3 个答案: