Foreachの要素 - ちょうど最初の要素が動作します

Question

私はブレードでlaravelを使用していますが、foreachを使用してビューに挿入するためにデータベースからデータを取得しています。各要素には、ポップアップを表示するIDがありますが、最初の要素だけで動作しますが、理由を理解できません。 3番目の要素にある最初のクリックは、たとえばどちらかです。最初の要素に対してのみ機能します。

データが正しく表示され、問題は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は1つの要素にのみ割り当てることができるため、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(); 
});}