Question

我正在尝试从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），如果我迭代所有按钮。

那怎么办呢？

Answer 1

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

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

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

Answer 2

您没有拨打电话回复，因此您现有的$(this)无关紧要 - 它将与封闭区块中this的任何值相关。

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

.popover

另外，你的问题措辞有点含糊不清。如果您只是使用标准的现成Bootstrap插件（根据源代码），您实际上只需指定一个回调函数，它将返回内容而不是传递字符串：

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

如何在调用插件时引用$（this）？

2 个答案: