模式引导下一个div上的prev按钮

Question

我与next和prev按钮的链接不起作用

这是我的 HTML 引导程序库。

<div class="row">
<div class="kolorystyka" id="Container">
    <p class="row">
        <div class="element-item2 category-1 lazy"><div style="width: 200px; height: 200px; background-image:url(images/realizacje/klasyczne/1.jpg)" class="img-rounded lazy img-responsive"></div><div class="caption">
     <h3>Caption 1</h3>
      </div></div>
        <div class="element-item2 category-1 lazy"><div style="width: 200px; height: 200px; background-image:url(images/2.jpg)" class="img-rounded lazy img-responsive"></div><div class="caption">
     <h3>Caption 2</h3>
      </div></div>

的Javascript

$(document).ready(function(){
        $('.lazy div').on('click',function(){
            var src =  $(this).css('background-image');
            var src = src.substring(4, src.length);
            var src = src.substring(0, src.length - 1);
            var img = '<img src="' + src + '" class="img-responsive"/>';

            //start of new code
            var index = $(this).parent('div').index();
            var html = '';
            html += img;
            html += '<div style="height:25px;clear:both;display:block;">';
            html += '<a class="controls next" href="'+ (index+1) + '">next 

</a>';


  html += '<a class="controls previous" href="' + (index) + '">prev</a>';
            html += '</div>';

            $('#myModal').modal();
            $('#myModal').on('shown.bs.modal', function(){
                $('#myModal .modal-body').html(html);
                //new code
                $('a.controls').trigger('click');
            })
            $('#myModal').on('hidden.bs.modal', function(){
                $('#myModal .modal-body').html('');
            });




       });

    })

     $(document).on('click', 'a.controls', function(){
        var index = $(this).attr('href');
        var src = $('.row div:nth-child('+ index +') img').attr('src');

        $('.modal-body div').str('scr', src);

        var newPrevIndex = parseInt(index) - 1;
        var newNextIndex = parseInt(newPrevIndex) + 2;

        if($(this).hasClass('previous')){
            $(this).attr('href', newPrevIndex);
            $('a.next').attr('href', newNextIndex);
        }else{
            $(this).attr('href', newNextIndex);
            $('a.previous').attr('href', newPrevIndex);
        }

        var total = $('.row div').length + 1;
        //hide next button
        if(total === newNextIndex){
            $('a.next').hide();
        }else{
            $('a.next').show()
        }
        //hide previous button
        if(newPrevIndex === 0){
            $('a.previous').hide();
        }else{
            $('a.previous').show()
        }


        return false;
    });