如何将导航添加到模式

Question

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

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

<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>

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