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> 

해결 방법 : ID가 고유 그래서이 클래스를 사용합니다.

감사의

Answer 1

이 경우 ID 대신 클래스를 사용해야합니다. ID는 하나의 요소에만 할당 될 수 있으므로 jQuery는 발견 한 첫 번째 요소와 일치하는 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(); 
});}