Foreach 元素 - 只有第一个元素有效答案

【问题标题】：Foreach elements - just the first element worksForeach 元素 - 只有第一个元素有效
【发布时间】：2017-03-13 21:52:52
【问题描述】：

我将 laravel 与刀片一起使用，并且我正在从数据库中获取数据以通过 foreach 插入到视图中。每个元素都有一个显示弹出窗口的 id，但仅适用于第一个元素，我不明白为什么。即使第一次点击在第三个元素中也是如此。仅适用于第一个元素。

数据显示正确，问题出在jquery click上。

我的 jquery：

function getEditFolder(){
 $( "#edit-folder" ).click(function(e)
 {
   alert("edit folder");
   var linkPopup = $(this).attr('data-popup');
   $.get(linkPopup, function(response)
   {
      $( ".opacity" ).css("display","block");
      $( ".popup" ).css("display","block");
      $('.popup').html(response);
      componentHandler.upgradeDom();
      $(".popup-close i").click(function()
      {
         $( ".popup .mdl-card" ).remove();
         $( ".popup" ).css("display","none");
         $( ".opacity" ).css("display","none");
      });
   });
   e.preventDefault();
 });}

我的看法：

<div id="slide">
@foreach ($groups as $group)
  <div class="folder" data-history="{{$group->historico}}" data-dir="{{$group->directoria}}">
    <div class="folder-icon-name">
      <div class="folder-icon">
        <i class="material-icons md-24">folder</i>
      </div>
      <div class="folder-op">
        <div class="update-icon">
          <i id="edit-folder" class="material-icons" data-popup="app/edit-folder">mode_edit</i>
        </div>
        <div class="download-icon">
          <i class="material-icons">cloud_download</i>
        </div>
        <div class="remove-icon">
          <i id="remove-folder" class="material-icons" data-popup="app/remove-folder">delete</i>
        </div>
      </div>
      <div class="folder-name">
        <span>{{$group->grupo}}</span>
      </div>
    </div>
  </div>
@endforeach</div>

解决方案： id 是唯一的，所以我必须使用类。

谢谢

【问题讨论】：

元素ids 必须是唯一的。改用一个类。

标签： php jquery laravel laravel-blade

【解决方案1】：

在这种情况下，您需要使用类而不是 ID。 ID 只能分配给单个元素，因此 jQuery 会匹配它找到的第一个元素，然后停止。

如果您使用一个类，那么它将允许您对按钮的每个实例使用相同的操作。

<i class="material-icons edit-folder" data-popup="app/edit-folder">mode_edit</i>

和 JS：

function getEditFolder(){
 $( ".edit-folder" ).click(function(e)
 {
   alert("edit folder");
   var linkPopup = $(this).attr('data-popup');
   $.get(linkPopup, function(response)
   {
      $( ".opacity" ).css("display","block");
      $( ".popup" ).css("display","block");
      $('.popup').html(response);
      componentHandler.upgradeDom();
      $(".popup-close i").click(function()
      {
         $( ".popup .mdl-card" ).remove();
         $( ".popup" ).css("display","none");
         $( ".opacity" ).css("display","none");
      });
   });
   e.preventDefault();
 });}

【讨论】：