Javascript 尝试显示引导模式旋转木马标题

最终，我会尝试在图片下方显示标题和作者

以下是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>

在代码中，未定义项

请尝试以下操作：获取数据标题和数据作者，并创建匹配的元素

缩小jQuery选择器的范围，如果适用，只构造一次jQuery选择，并使用$.fn.text以获得更好的性能

工作小提琴：

// 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});
});

$('.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});
});