試着讓引導模式輪播標題出現

Question

最終我試圖讓標題和作者在圖像下方顯示。

下面是HTML：

<div class="row"> 
     <div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 1" data-caption="This is a caption."><img src="//placehold.it/600x350" class="thumbnail img-responsive"></a></div> 
     <div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 2" data-caption="This is a caption."><img src="//placehold.it/600x350/2255EE" class="thumbnail img-responsive"></a></div> 
</div> 

<div id="myModal" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3 class="modal-title">Heading</h3> 
    </div> 
    <div class="modal-body"> 
     <p class="modal-caption"></p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
    </div> 
</div> 

和JavaScript。我只是不知道自己做錯了什麼，所以任何幫助都會很棒。我試圖訪問錨標籤內的數據屬性來填充相應的div（數據標題將顯示在。）。

// Gallery Modal 
$('.thumbnail').click(function(){ 
    $('.modal-body').empty(); 
    var title = $(this).parent('a').attr("title"); 
    $('.modal-title').html(title); 

    var caption = $(this).parent('a').attr("data-caption"); 
    $('.modal-caption').html(caption); 

    item.attr("data-caption",caption); 
    item.appendTo('.modal-caption'); 

    $($(this).parents('div').html()).appendTo('.modal-body'); 
    $('#myModal').modal({show:true}); 
}); 

Answer 1

在您的代碼中item未定義。

試試這個：取data-caption和data-author並創建匹配元素。

縮小jQuery選擇器，僅在適用的情況下構造jQuery選擇，並使用$.fn.text以獲得更好的性能。

工作小提琴：http://jsfiddle.net/9NYNW/1/

$('.thumbnail').click(function(){ 
    var $parent = $this.parent('a'); 

    var $modal = $('#modal'); 
    var $title = $modal.find('.modal-title'); 
    var $body = $modal.find('.modal-body'); 

    var $items = $(); 

    $.each(['caption', 'author'], function(i, key) { 
     var $item = $('<div />', { 'class': 'modal-' + key }); 
     $item.text($parent.attr('data-' + key)); 
     $items = $items.add($item.get(0)); 
    }); 

    $title.text($parent.attr('title'));  
    $body.html($(this).clone()); 
    $body.append($items); 
    $modal.modal({show:true}); 
});