Question

所以这就是事情。我有一个数据库，我从表中回显所有图像。这是我的＆＃39; gallery.php＆＃39;的代码。文件：

<div class="gallery">
    <div class="row">
    <?php
        require('dbparams.php');
        try{
            $pdoObject = new PDO("mysql:host=$dbhost; dbname=$dbname;",$dbuser, $dbpass);
            $sql = "SELECT * FROM pictures";
            $statement = $pdoObject -> prepare($sql);
            $result = $statement -> execute();
            while($record=$statement->fetch()){
                $filename = $record['filename'];
                $mimetype = $record['mimetype'];
                $filedata = $record['filedata'];
                $id=$record['id'];
                echo "<div class='col-sm-5 col-md-3'>";
                    echo "<div class='thumbnail'>";
                        echo "<a id='p' href='#imagemodal'><img id='imageresource' src='data:image/jpeg;base64,".base64_encode($filedata)."' alt='Click'></a>";
                        echo "<div class='caption'>";
                            echo "<h3>Thumbnail label</h3>";
                            echo "<p>...</p>";
                        echo "</div>";
                    echo "</div>";
                echo "</div>";
                }       
            $statement->closeCursor();
            $pdoObject = null;
        }
        catch (PDOException $e) {
            header('Location: index.php?msg=PDO Exception: '.$e->getMessage());
            exit();
        }
        ?></div>
</div>

一切正常，这是我的模态（bootstrap）的代码。它在外部PHP文件上，我使用require＆＃39; imagemodal.php＆＃39 ;; ：

<?php
echo '<div class="modal fade" id="imagemodal" role="dialog">';
echo '<div style="width:85%;" class="modal-dialog">';
    echo '<div class="modal-content">';
        echo '<div class="modal-header">';
            echo '<button type="button" class="close" data-dismiss="modal">&times;</button>';
            echo '<h4 class="modal-title"></h4>';
        echo '</div>';
        echo '<div id="mainmod" class="modal-body">';
        echo '</div>';
        echo '<div class="modal-footer">';
            echo '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
        echo '</div>';
    echo '</div>';
echo '</div>';
echo '</div>';
?>

在＆＃39; gallery.php＆＃39;文件我认为我可以使用javascript-jquery所以通过＆＃34; a＆＃34;标签我会创建一个＆＃34; img＆＃34;标记具有调用js代码的特定图像。问题是，虽然它工作得很好，但每当我点击一个图像和任何图像时，它都会回应来自图库的第一个图像。例如，假设我有10个图像。所有代码都正常。但是，如果我点击第一张图像，第二张图像，第三张图像，它总是打开第一张图像。我怎么可能做错了？这是gallery.php文件中的js代码：

<script>
        $("[id='p']").click(function() {
            $("#mainmod").empty();
            $("#mainmod").append("<img id='imagepreview' src=''>")
            $("[id='imagepreview']").attr('src', $("[id='imageresource']").attr('src'));
            $("[id='imagemodal']").modal('show');
        });
    </script>

Answer 1

旁注：HTML中的ID应该是唯一的。

从第一个项目中选择id为“imageresource”的src，该项目位于整个文档中。你想要做的是从第一个img标签中选择src，该标签是用户刚刚点击的链接的子节点。

echo "<a class='trigger' href='#imagemodal'><img src='data:image/jpeg;base64,".base64_encode($filedata)."' alt='Click'></a>";
                    echo "<div class='caption'>";



<script>
        $(".trigger").click(function() {
            $("#mainmod").empty();
            $("#mainmod").append("<img id='imagepreview' src=''>")
            $("[id='imagepreview']").attr('src', this.children('img').attr('src'));
            $("[id='imagemodal']").modal('show');
        });
    </script>

Answer 2

你需要在hide上清除bootstrap模式，试试这个

<script>
//reset the modal content
    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });
</script>

PHP和javascript组合可以调出一个动态模态

2 个答案: