Question

我想在我的模态页脚上添加下一个和上一个按钮，这些按钮将导航到div标签中的下一个图像。我尝试了不同的选择，但它不起作用。

＆＃13;

$(document).ready(function() {
  $('.thumbnail').click(function($e) {
    $e.preventDefault();
    $('.modal-body').empty();
    var title = $(this).parent('a').attr("title");
    $('.modal-title').html(title);
    $($(this).parents('div').html()).appen `enter code here`
    dTo('.modal-body');
    $('#myModal').modal({
      show: true
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-md-6 class_b" id="class_b">
  <h3>Screenshot Gallery</h3>
  <div class="row" style="margin-top:40px;">
    <div class="col-lg-4 col-sm-4 col-xs-6">
      <a title="Image 1" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-6">
      <a title="Image 2" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-6">
      <a title="Image 3" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-6">
      <a title="Image 4" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-6">
      <a title="Image 5" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-6">
      <a title="Image 6" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
    </div>
  </div>
</div>
<div tabindex="-1" class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" onclick="$('.modal').hide();">×</button>
        <h3 class="modal-title">Heading</h3>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-prev">Prev</button>
        <button type="button" class="btn btn-default btn-next">Next</button>
        <button class="btn btn-default" onclick="$('.modal').hide();">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

JSFiddle

Answer 1

你的JQuery代码中有一些错误，在这一行：

$($(this).parents('div').html()).appen`enter code here`dTo('.modal-body');

这是更新的JQuery函数：

$(document).ready(function() {
  $('.thumbnail').click(function($e){
    $e.preventDefault();
    $('.modal').show();
    $('.modal-body').empty();
    var title = $(this).parent('a').attr('title');
    $('.modal-title').html(title);
//The next line does what I think you want it to do, and is a replacement for the faulty code line
    $(this).parent('a').parent('div').clone().appendTo('.modal-body'); 
    $('#myModal').modal({show:true});
  });
  $('.btn-prev').click(function(){
    var current = $('.modal-body').find('a').attr('title');
    $('a[title="' + current + '"]').parent('div').prev('div').children('a').children('.thumbnail').trigger('click');
  });
  $('.btn-next').click(function(){
    var current = $('.modal-body').find('a').attr('title');
    $('a[title="' + current + '"]').parent('div').next('div').children('a').children('.thumbnail').trigger('click');
  });
});

CodePen示例：http://codepen.io/AquatuzMagnus/pen/vmPWoJ

如何向模态添加导航

1 个答案: