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循环中的第一个结果。请帮助我以相对的方式使用<?php echo $get_stf['sts_id']; ?>作为唯一ID，以便它可以处理所有结果。我使用data-row作为属性来分配唯一ID。请帮助他修复具有唯一ID的Javascript。

Answer 1

您应该使用id属性来管理Javascript中的唯一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 } ?>

Javascript在while循环中打开一个模态

1 个答案: