Question

我试图制作一个循环，用popover javascript显示一些链接。这就是我所拥有的

accueil_hover.js

$(document).ready(function(){
$('#popoverOption').popover({ trigger: "hover" });
});

accueil_blade.php （假设作为参数传递的数据是正确的）

 <div class="container">
      @for ($i = 0 ; $i < count($etablissements); $i ++)
            <a id="popoverOption" class="btn" data-content="here is some data" rel="popover" data-original-title="{{$etablissements[$i]->code_etablissement}}" data-placement="bottom" href="{{ URL::to('dashboard_etablissement/' . $etablissements[$i]->code_etablissement)}}">{{$etablissements[$i]->nom}}</a><br>
      @endfor

 </div>

但是popover不会表现出来。我想这是因为我的所有链接都具有相同的ID 但是我怎么能让它与javascript不同才能理解？就像是： popoverOption。$ i ？

Answer 1

Id应该是唯一的。您可以使用Class代替ID

$('.popoverOption').popover({ trigger: "hover" });

标记：

<a class="btn popoverOption" data-content="here is some data" rel="popover" data-original-title="{{$etablissements[$i]->code_etablissement}}" data-placement="bottom" href="{{ URL::to('dashboard_etablissement/' . $etablissements[$i]->code_etablissement)}}">{{$etablissements[$i]->nom}}</a><br>

Answer 2

您可以获得如下所示的唯一id属性：

<div class="container">
  @for ($i = 0 ; $i
  < count($etablissements); $i ++) <a id="popoverOption_$i" class="btn" data-content="here is some data" rel="popover" data-original-title="{{$etablissements[$i]->code_etablissement}}" data-placement="bottom" href="{{ URL::to('dashboard_etablissement/' . $etablissements[$i]->code_etablissement)}}">{{$etablissements[$i]->nom}}</a>
    <br>@endfor

</div>

选择器将是[id^=popoverOption_]：

$(document).ready(function() {
  $('[id^=popoverOption_]').popover({
    trigger: "hover"
  });
});

Javascript popover循环不显示

2 个答案: