Foreach元素 - 只是第一個元素工作

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> 

SOLUTION： 的ID是唯一的，所以我不得不使用類。

感謝的

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