如何將img src傳遞到Bootstrap模式？

現在我得到了循環中所有圖像的src。我現在的問題是，我無法通過模態來顯示正確的圖像。事實上，我無法展示任何圖像。這是代碼。如何將img src傳遞到Bootstrap模式？

<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>

來源

2014-06-26 user3719656

您有圖像重複的ID。那是無效的。 ID應該是唯一的。 –

查詢的結果是什麼？ – tjati

Javascript循環在哪裏？我看到的只是一個單擊處理程序。 – Barmar

正如評論所說，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>

來源

2014-06-26 09:30:33 Barmar

您複製圖像的ID。在HTML中，ID必須是唯一的。相反，您可以使用class='getSrc'，並在您的查詢替換$('#getSrc')由$('.getSrc')

來源

2014-06-26 09:30:43 Ballantine

問題是，您有多個img標記具有相同的ID。這不是有效的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>

來源

2014-06-26 09:32:26 Silex

這裏是你要求什麼簡單的例子。

正如其他人已經指出的，ID必須是唯一的，所以你可以使用class來代替。這樣，您可以加載具有特定類的所有元素，然後使用$.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">

輸出當您單擊按鈕

enter image description here

來源

2014-06-26 09:38:17 Latheesan

試試這個，

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

來源

2014-06-26 09:40:01 hari

如何將img src傳遞到Bootstrap模式？

回答

相關問題