如何使用 javascript 将图像 src 传递给引导模式？答案

【问题标题】：How to pass the image src to the bootstrap modal with javascript?如何使用 javascript 将图像 src 传递给引导模式？
【发布时间】：2014-08-17 08:20:30
【问题描述】：

我的数据库中有一个 while 循环的图像。我使用 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>

【问题讨论】：

看起来你在调用 showPic() 函数，但我没看到它是在哪里定义的？

标签： javascript jquery html image twitter-bootstrap

【解决方案1】：

问题出在这一行：

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

你可以这样设置src：

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

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

【讨论】：

感谢亨利爵士 :) 我终于让它运行起来了.. 真的很大的帮助！
不客气！如果您解决了问题，请将此标记为正确答案。
@HenriHietala 你好！.. 我刚刚尝试了你的解决方案，它对我有用！。但是在这里，如果我们想获取每张被点击的图片的id，我们应该怎么做呢？

【解决方案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 } ?>

【讨论】：