动态添加一个类到Bootstrap的'popover'容器 [英] Dynamically add a class to Bootstrap's 'popover' container

问题描述

我已经彻底搜索过StackOverflow和Google，但是空了。所以，如果这已经被问及提前道歉已解决。

I've thoroughly searched through both StackOverflow and Google, but come up empty. So apologies in advance if this has been asked & resolved already.

注意：我是jQuery的新手，所以我不知道如何写自己。我相信这是一个简单的代码片段，但不能封装我的头。

NB: I'm a newbie at jQuery, so I'm not sure how to write this up myself. I'm sure this is an easy snippet of code, but can't wrap my head around it.

我想要做的是使用 data - 元素（例如： data-class 或类似）附加一个新类（或ID， ！）到顶层弹出框< div> 。目前的代码如下：

What I'm looking to do is use a data- element (eg: data-class or similar) to attach a new class (Or ID, I'm not picky anymore!) to the top-level popover <div>. The code I currently have is as follows:

jQuery：

$('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .click(function(e) {
        e.preventDefault()
    });

HTML：

HTML:

<a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here">

理想情况下，我会吐出的HTML类型是这样：

And ideally the kind of HTML I would have spit out, is something like this:

<div class="popover ... dynamic-class">
    <!-- remainder of the popover code as per usual -->
</div>

这是我能做的吗？关于bootstrap网站上的popos文件是有点稀疏，所以它花了我一段时间只是为了到这一点，不幸的是：（

Is this something I can do? The documentation on the bootstrap site for popovers is a bit sparse, so it's taken me a while just to get to this point, unfortunately :(

感谢提前任何& amp ;所有回应！

Thanks in advance for any & all responses!

推荐答案

根据@bchhun写的和很多头疼，我觉得我应该回答自己的问题，因为我得到它的工作，我也注意到这已经被喜欢和喜欢，所以我希望我帮助别人谁是一个新手在jQuery喜欢自己。

Based on what @bchhun wrote and a lot of head scratching, I felt I should answer my own question, as I got it working. I also noticed this had been favourited and liked, so I hope I'm helping someone else who is a newbie at jQuery like myself.

在当前的Bootstrap版本[v2.1.0]中，脚本全部合并，所以如果你已经包含了所有的脚本（没有编辑任何新的行/采取一些），然后转到行的1108 -minified .js 文件。您将找到以下位代码：

In the current Bootstrap build [v2.1.0], the scripts are all consolidated. So if you have included all of the scripts in your build (and not edited any new lines/taken some out), then head to line 1108 of the un-minified .js file. You'll find the following bit of code:

$tip
  .css(tp)
  .addClass(placement)
  .addClass('in')

您将为此添加新行，即：

You're going to be adding a new line to this, which is:

  .addClass(this.$element.attr("data-class"))

现在每当你添加 data-class 到popover调用，它将添加属性到< div class =popover> div。

So now whenever you add data-class to the popover call, it will add the attribute to the <div class="popover"> div.

现在我看到了，很明显：）

Now that I see it, it's so obvious :)

这篇关于动态添加一个类到Bootstrap的'popover'容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！