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

尝试使用bootstrap模态轮播标题出现

1 个答案: