Javascript 在单击bootsrap模式时获取src值

我试图用JQuery获取图像的

src

值，将其传递到引导模式中，以便在其上显示。我的问题是，我不知道如何获得这个

src

值，我尝试了一些javascript，但我猜它不能正常工作。请帮忙

这是我的照片：

<img class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic">

---

试试这个，基本上你需要获得img的源代码并将其插入模态的“”

首先，您应该为要从中获取源的图像提供一个id，以便于检索，并确保一个类没有关联多个图像

<img id="img-thumbnail" class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic">

其次，您可以在页面加载时执行以下代码：

备选案文1：

jQuery(document).ready(function($){
   loadImage();
});

备选案文2：

您可以在加载模态时执行该函数，因为可能需要加载滞后

$('#img_modal').on('show.bs.modal', function (event) {

    loadImage();
});

---

希望这有帮助。

当您单击图像

#pic

时，其源将添加为图像

#photo_modal

的源

$('#pic').on('click', function() {
    $('#photo_modal').attr('src', $(this).attr('src'));
});

---

如果需要获取任何图像的源，可以执行以下操作：

$('img').on('click', function(){
     var imageSource = $(this).attr('src')
})

---

例如，添加一个由

单击的img src

标识的

隐藏的
输入，并定义
单击
事件来处理用户单击
img
并使用
.attr（'src'）
从单击的图像中获取
src
属性，然后存储在输入中：

<input type="hidden" id='clicked-img-src'/>

$('body').on('click', 'img', function(){
     var img_source = $(this).attr('src');
     $('#clicked-img-src').val(img_source);
})

希望这有帮助。
这里有一个想法

HTML

<img class="thumbnail mini-thumb" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />

<img class="thumbnail mini-thumb" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" />

<div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <img class="img-thumbnail" src="" id="photo_modal" name="photo">
        </div>
    </div>
</div>


函数获取数据bigpic值并将其添加到模态图像中

--编辑--
这里是相同的，但使用图像中的src

这只是我的观点，但我相信使用ajax重新加载模式内容可能更好。如果您这样做，您的页面将只需要加载迷你拇指。然后使用数据bigimage值加载服务器返回的数据。如果您有很多图像，您希望在哪个事件上向#photo_模型添加src，这可能会有所帮助？从哪个图像？场景是当我点击一个调整大小的图像时，我将在引导模式中加载它，但我需要首先为点击的图像获取正确的src值：）谢谢，但这并不完全是我所需要的，我想在点击它时获取正确的图像src，然后我将它传递给该模式。你能详细说明吗？此外，如果你有jFiddle，它会更容易帮助你。你是从哪里得到将点击事件附加到图像上的冲动的？这里是OP在你的答案中发布的一条评论谢谢，但这并不完全是我所需要的，我想得到正确的图像src当我点击它，然后我会把它传递给模态'。我做错什么了吗？当然，我也可以将点击事件附加到“img缩略图”类上，正如你在我的评论中所看到的，我很难过“任何图像”我得到了src，但模态没有收到它。你可以按照@Mr Alexander已经发布的答案来做。我也可以更新我的问题来做这件事，但它将与Alexander建议的相同，这是一个很好的解决方案。你能补充一些解释吗？
$('img').on('click', function(){
     var imageSource = $(this).attr('src')
})

<input type="hidden" id='clicked-img-src'/>

$('body').on('click', 'img', function(){
     var img_source = $(this).attr('src');
     $('#clicked-img-src').val(img_source);
})

function loadImage(){
    $('#photo_modal').attr('src', $('#clicked-img-src').val());
}

<img class="thumbnail mini-thumb" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />

<img class="thumbnail mini-thumb" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" />

<div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <img class="img-thumbnail" src="" id="photo_modal" name="photo">
        </div>
    </div>
</div>

$(document).ready(function(){
    loadPreviews();

});

function loadPreviews(){
    $(".mini-thumb").on('click', function(){
        console.log("Img url " + $(this).data('bigpic'));
      $("#photo_modal").attr("src", $(this).data('bigpic'));
        $("#img_modal").modal("show");
  });
}