Question

我使用twitter-bootstrap获取HTML页面。我已经能够使工具提示和弹出窗口工作，并且能够为弹出窗口添加一些自定义CSS样式。

现在我正在尝试向页面添加3个按钮，以便在点击时触发3个弹出窗口。

我已将此代码添加到3个按钮中的每一个：

<a class="btn btn-default" href="#" role="button" id="st-popover" data-toggle="popover" rel="popover" title="<strong>Ideal for:</strong> Clients who no longer need an equity line of credit and are in a financial position to begin repaying their balance with the new monthly payments.<br /><br /><strong>What:</strong> Begin to pay off the balance of your existing equity line of credit when the draw period ends.<br /><br /><strong>Get started:</strong> Continue to make regular payments under the repayment period terms of your existing home equity line of credit; no further action is required." data-placement='bottom' data-html='true'>Learn More</a>

但问题似乎是只有点击时DOM中的第一个按钮弹出窗口才会触发。其他两个只是坐在那里什么都不做。

这是我在底部的脚本：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="dist/js/tooltip.js"></script>
<script src="dist/js/popover.js"></script>
<script>
$(function(){
        $('#st-popover').popover();
});
</script>

任何帮助让3个人在一个页面上工作或任何要查看的资源都会受到赞赏，谢谢。

Answer 1

当jQuery使用id作为选择器时，它会在找到第一个后停止搜索。由于有多个btn，使用一个类而不是id。

因此，请尝试将id="st-popover"更改为class="st-popover"

$('.st-popover').popover();

如何在一个twitter-bootstrap html页面上获得多个popovers工作

1 个答案: