Question

现在我已经获得了循环中所有图像的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="img-responsive" class="showPic">
            </div>
        </div> 
    </div>
</div>

Answer 1

正如评论所说，ID必须是唯一的。你应该使用一个类。

<?php while ($row = mysqli_fetch_assoc($query)) { ?>
        <img src="<?php echo $row['pic']; ?>" width="100" height="100" class="getSrc">
<?php } ?>

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

Answer 2

您复制了图片的ID。在HTML中，id必须是唯一的。相反，您可以使用class='getSrc'，并在您的查询中将$('#getSrc')替换为$('.getSrc')

Answer 3

问题是您有多个具有相同ID的img标记。这不是有效的HTML。

你想要的是这样的：

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

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

<?php while ($row = mysqli_fetch_assoc($query)) { ?>
        <img src="<?php echo $row['pic']; ?>" width="100" height="100" class="getSrc">
<?php } ?>

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

Answer 4

以下是您要求的简短示例。

正如其他人已经指出的那样，ID必须是唯一的，因此您可以使用类来代替。这样，您可以加载具有特定类的所有元素，然后使用$.each来迭代它。

检查出来：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

// When page loads
$(function()
{
    // Handle button click
    $('.getSrc').click(function()
    {
        // Grab all image src
        var myImages = [];
        $('.myImg').each(function() {
            myImages.push($(this).prop('src'));
        })

        // Debug
        console.log(myImages);
    });

});

</script>

<img class="myImg" src="http://worldcup2014.aerobicunionbg.com/wp-content/uploads/2014/01/Logo-BorovetsAerobicsFIGWC2014.png"> 
<img class="myImg" src="https://yt3.ggpht.com/-_fcZ0U-7sUc/AAAAAAAAAAI/AAAAAAAAAAA/yhpp-Bkk23c/s100-c-k-no/photo.jpg"> 
<img class="myImg" src="http://www.gamesrubble.com/games/images/World-Cup-2014.png"> 

<input type="button" class="getSrc" value="Get Images">

单击按钮

时，

输出

Answer 5

试试这个，

    $('.getSrc').click(function(imgsrc) {
     var img = new Image();
    var src = imgsrc;
    alert (src);
    });

如何将img src传递给Bootstrap模式？

5 个答案: