有沒有辦法通過點擊主頁div來替換模態的內容div？

在圖像索引頁上有一長串照片，每張照片都有一個唯一的ID和一個統一的類。我使用Ruby on Rails的，但是HTML輸出看起來像這樣約20次，每次圖像：有沒有辦法通過點擊主頁div來替換模態的內容div？

<div id="A unique number" class="myImages" data-toggle="modal" data-target="#myModal"> 
     <img src="my.images.url"> 
</div>

從本質上講，我的索引頁上二十圖像，每個人得到一個唯一的ID，但他們都屬於myImagestoggle="modal"和target="#myModal"

我的模式是這樣的：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Submit</button> 
     </div> 
    </div> 
    </div> 
</div>

到目前爲止，我一直在試圖更換"modal-body"使用jQuery這樣的：

$(".myImages").click(function(e){ 
    e.preventDefault(); 
     var content = $(this).html(); 
     $(".modal-body").replaceWith('<div class="replaced">'+content+'</div>'); 
})

而且我也試過：

$(".myImages").on('click', function(){ 
    $(".modal-body").replaceWith('.myImages') 
})

我想我需要以某種方式引用的div ID我點擊我的jQuery來使用。類似於

$("#<%= dynamically_use_id_of_div_I_Clicked_On %>").on('click',function({ 
    -code that replaces the modal div with the image tag- 
})

有沒有辦法做到這一點？

來源

2015-09-04 Ryan Oliver Lanham

試試這個：

$(".myImages").click(function (e){ 
    e.preventDefault(); 
    $(".modal-body").html($(this).html()); 
});

詳情請見jsfiddle

來源

2015-09-04 14:44:16 Zl3n

我無法得到一個爲我工作。模態仍然彈出正常，但「模態體」仍然只是「......」。 –

@RyanOliverLanham我添加了jsfiddle – Zl3n

有沒有辦法通過點擊主頁div來替換模態的內容div？

回答

相關問題