javascript - Bootstrap : Show modal window on image click in a loop

Question

我必须在循环单击图像时打开图像模式窗口。这就是我正在做的事情，但没有产生所需的结果。请检查逻辑是否正确或有问题

<?php for ($i=0; $i<5;$i++):?>
        <a id = "<?=$i?>" href="#"><img src="/image/6Molf.png?s=48&g=1" alt="">  </a>


<div class="modal fade" id="<?=$i?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>

            </div>
            <div class="modal-body">
                Some content 
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" language="javascript">

    $(document).ready(function () {
        $("#<?=$i?>").click(function () {
            $('#<?=$i?>').modal('show'); 
        });
    }); 

</script>
<?php endfor;?>

上面有一个黑色层，但模态不显示，请参阅附图

Answer 1

试试这个，希望能成功

<?php for ($i=0; $i<5;$i++):?>
    <a id = "<?=$i?>" class="aclick" href="#"><img src="/image/6Molf.png?s=48&g=1" alt="">  </a>


    <div class="modal fade" id="modal_<?=$i?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;</button>

                </div>
                <div class="modal-body">
                    Some content
                </div>
            </div>
        </div>
    </div>
<?php endfor;?>

脚本:-

$(".aclick").click(function (e) {
        e.preventDefault();
        var id = $(this).attr('id');
        console.log(id);
        $('#modal_'+id).modal('show');
    });