whileループでモーダルを開くJavascript

Question

<div>がクリックされたときに表示されるモーダルを作成しましたが、whileループの最初の結果のみで動作します。私は同じものに一意のIDを割り当てなければならないと思う。私は試みたが、これはjqueryではなくjavascriptである。だから私はそれをどうやって行うのか混乱している。

Javascriptを：

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：

<?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 } ?> 

モデルは、現在、whileループで第一結果にのみで動作します。関連性の高い方法で一意のIDとして<?php echo $get_stf['sts_id']; ?>を使用すると、すべての結果に適用されます。私は一意のIDを割り当てるための属性としてdata-rowを使用しました。彼はユニークなIDでJavascriptを修正するのを手伝ってください。

Answer 1

あなたはJavascriptで固有の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 } ?>