Question

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

数据显示正确，问题只是点击jquery。

我的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是唯一的，所以我必须使用class。

感谢的

Answer 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();
 });}

Foreach元素 - 只是第一个元素起作用

1 个答案: