0

我正在尝试从 twitter bootstrap 实现 popover 组件：

$('.popover-button').popover({
    html: true,
    placement: 'bottom',
    content: $(this).data('content-id')
});

<button class="popover-button" data-content-id="div1">Click 1</button>
<button class="popover-button" data-content-id="div2">Click 2</button>
<button class="popover-button" data-content-id="div3">Click 3</button>

<div class="div1">Hello 1</div>
<div class="div2">Hello 2</div>
<div class="div3">Hello 3</div>

但它不起作用，如果我迭代所有按钮，我似乎不能像往常一样使用 $(this) 。

那么如何做到这一点呢？

4

2 回答 2

2

您没有调用回调，因此您的现有$(this)是无关紧要的——它将与this封闭块中的任何值相关。

如果您的插件没有.data直接读取属性，那么您需要使用一个.each块来提取每个元素的值，然后将它们单独传递.popover给每个单独元素的插件：

$('.popover-button').each(function() {
    var $this = $(this);
    var content = $this.data('content-id');
    $this.popover({
        html: true,
        placement: 'bottom',
        content: content
    });
});

另外，您的问题措辞有些模棱两可。如果您只是使用标准的现成 Bootstrap 插件，那么（根据源代码）您实际上可以只指定一个回调函数，该函数将返回内容而不是传递字符串：

content: function() {
    return $(this).data('content-id');
}
于 2013-10-14T17:10:59.580 回答
2

您需要遍历元素并调用popover每个元素。

$('.popover-button').each(function(){
    $(this).popover({
        html: true,
        placement: 'bottom',
        content: $(this).data('content-id')
    });
});

然后您可以将每个元素的信息传递给该方法。

于 2013-10-14T17:08:19.673 回答