Question

编辑：我需要使用一个课程，谢谢你指出一个课程

我有以下div：

<div class="section-link" id="section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right">
    <div class="section-features" style="display: none;">
    Content
    </div>
</div>
<div class="section-link" id="section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right">
    <div class="section-features" style="display: none;">
    Content
    </div>
</div>
<div class="section-link" id="section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right">
    <div class="section-features" style="display: none;">
    Content
    </div>
</div>

正如你可以看到他们都使用相同的id，我试图使用以下JQuery在bootstrap中创建一个popover但是它只为一个div做它并且我试图让它为它们做所有没有必须设置个人ID。

$('#section-tooltip').each(function(){
        $(this).popover({
    trigger: "hover",
    html : true, 
    content: function() {
      return $(this).children('div:first').html();
    }
    });
});

Answer 1

将ID转换为类，然后修改代码：

<div class="section-link section-tooltip" data-content="Popup with option trigger" rel="popover" data-placement="right">
    <div class="section-features" style="display: none;">
    Content
    </div>
</div>

$('.section-tooltip').each(function(){
    $(this).popover({
        trigger: "hover",
        html : true, 
        content: function() {
            return $(this).children('div:first').html();
        }
    });
});

这假设您有其他元素使用同一个类（.section-link）不希望应用此行为。否则只需使用该类。

Answer 2

$('.section-link').each(function(){
        $(this).popover({
    trigger: "hover",
    html : true, 
    content: function() {
      return $(this).children('div:first').html();
    }
    });
});

Answer 3

FROM：http://www.w3schools.com/tags/att_global_id.asp

定义和用法id属性指定了一个唯一的id   HTML元素（HTML文档中的值必须是唯一的）。

id属性最常用于指向样式表中的样式，   并通过JavaScript（通过HTML DOM）来操纵元素   具体的身份。

具有相同ID的多个div的事件

3 个答案: