Question

我的数据库中有一段时间的图像循环。我使用javascript获取图像的src。单击时，必须打开一个模式，并单击图像。我的问题是我无法将图像的src传递给模态以显示正确的图像。事实上，我根本无法显示任何图像。这是我的代码。谢谢你的帮助。

<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>

<?php
    $sql = "SELECT * FROM portfolio";
    $query = mysqli_query ($conn, $sql);
?>

<div class="col-md-12">
    <h1>Portfolio</h1>

    <table class="table">

        <?php while ($row = mysqli_fetch_assoc($query)) { ?>

            <tr>
                <td>
                    <br>
                        <a data-toggle="modal" data-target="#myModal1">
                            <img src="<?php echo $row ['pic']; ?>" width="200" height="150" class="getSrc">
                        </a>
                    <br><br>
                </td>
                <td>
                    <h4><a href="<?php echo $row ['link']; ?>" target="_blank"><?php echo $row ['projectName']; ?></a></h4>
                    <?php echo $row ['description']; ?><br><br>

                    <strong class="text-warning"><?php echo $row ['note']; ?></strong>
                </td>
            </tr>

        <?php } ?>

    </table>

</div>

<script type="text/javascript">
     $('.getSrc').click(function() {
        var src =$(this).attr('src');

        $('.showPic').attr('src') = src;
     });
</script>

<!-- MODAL --> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="col-md-12">

                <img src="" class="showPic">
            </div>
        </div> 
    </div>
</div>

Answer 1

问题在于这一行：

$('.showPic').attr('src') = src;

您可以像这样设置src：

$('.showPic').attr('src', src);

以下是它应该如何的小提琴：http://jsfiddle.net/ZU3xx/2/

Answer 2

这可能有所帮助：

<table class="table">

<?php  $dynamic_id=""; 
       $temp_i = 1;  ?>

   <?php while ($row = mysqli_fetch_assoc($query)) {

    $dynamic_id = "#myModal" + $temp_i;

             ?>

      <tr>
        <td>
        <br>
        <a data-toggle="modal" data-target="<?php echo $dynamic_id; ?>">
                            <img src="<?php echo $row ['pic']; ?>" width="200" height="150" class="getSrc">
                        </a>
                    <br><br>
                </td>
                <td>
                    <h4><a href="<?php echo $row ['link']; ?>" target="_blank"><?php echo $row ['projectName']; ?></a></h4>
                    <?php echo $row ['description']; ?><br><br>

                    <strong class="text-warning"><?php echo $row ['note']; ?></strong>
                </td>
            </tr>

        <?php } ?>

    </table>

</div>



 <?php while ($row = mysqli_fetch_assoc($query)) {

              $dynamic_id = "#myModal" + $temp_i;

             ?>

<!-- <?php echo $dynamic_id ?>  --> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="<?php echo $dynamic_id ?>">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="col-md-12">
                <img src="<?php echo $row ['pic']; ?>" class="showPic">
            </div>
        </div> 
    </div>
</div>


<?php } ?>

如何使用javascript将图像src传递给bootstrap模式？

2 个答案: