while 루프에서 모달을 여는 자바 스크립트

Question

<div>이 클릭되었을 때 나타나는 모달을 만들었지 만 while 회 돌이 중 첫 번째 결과에서만 작동합니다. 같은 ID를 할당해야한다고 생각합니다. 시도했지만 이것은 jquery가 아니라 자바 스크립트입니다. 그래서 나는 그것을하는 방법에 혼란 스럽다.

자바 스크립트 :

var modal = document.getElementById('edit-post-model-box'); 
var btn = document.getElementById("edit-post-model"); 
var span = document.getElementsByClassName("close")[0]; 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 

HTML : 모델은 현재 동안에 만 루프에서 1 차 결과에 작동

<?php while($get_stf = $abc->fetch()) { ?> 
    <ul> 
     <li><a href="#" id="edit-post-model" data-row="<?php echo $get_stf['sts_id']; ?>" class="edit-status-post">Edit Post</a></li> 
     <li class="border-bottom-none"><a href="">Delete Post</a></li> 
    </ul> 
    <div id="edit-post-model-box" class="modal" data-row="<?php echo $get_stf['sts_id']; ?>"> 
     <div class="modal-content"> 
      <span class="close">x</span> 
      <p><?php echo $get_stf['sts_id']; ?></p> 
     </div> 
    </div> 
<?php } ?> 

. 모든 결과에서 작동하도록 연관성있는 방식으로 <?php echo $get_stf['sts_id']; ?>을 고유 ID로 사용하도록 도와주세요. 고유 ID를 할당하는 속성으로 data-row을 사용했습니다. Javascript를 고유 ID로 수정하도록 도와주세요.

Answer 1

당신은 자바 스크립트에 고유 ID를 관리하는 id 속성을 사용한다 : 문서에서

<?php for($i=0;$i<3;$i++){ ?> 
<ul> 
    <li><a href="#" id="edit-post-model_<?php echo $i; ?>" class="edit-status-post">Edit Post</a></li> 
    <li class="border-bottom-none"><a href="">Delete Post</a></li> 
</ul> 
<div id="edit-post-model-box_<?php echo $i; ?>" class="modal"> 
    <div class="modal-content"> 
     <span id="close_<?php echo $i; ?>">x</span> 
     <p><?php echo $i; ?></p> 
    </div> 
</div> 
<script> 
    document.getElementById("edit-post-model_<?php echo $i; ?>").onclick = function() { 
     document.getElementById('edit-post-model-box_<?php echo $i; ?>').style.display = "block"; 
    }; 

    document.getElementById("close_<?php echo $i; ?>").onclick = function() { 
     document.getElementById('edit-post-model-box_<?php echo $i; ?>').style.display = "none"; 
    }; 
</script> 
<?php } ?>