次の/前のリンクで複数のBootstrap3モーダルを繰り返すにはどうすればいいですか？

Question

現在の開いているモーダル内のnextおよびprevリンクを介して、複数のBootstrap3モーダルを循環させようとしています。私が持っているスクリプトは、「次へ」をクリックすると次のモーダルに進み、「前の」をクリックすると前のモーダルに戻るが、data-dismiss = "モーダル"機能を使用してモーダルを非表示にすることはできない。さらに、私のJQueryはむしろハッキーに見えます。より良い方法がありますか？助けを歓迎します。あなたがmodalの組み込みの表示隠す機能を使用して試すことができます

<button class="text-link" data-toggle="modal" data-target="#modalOne">Modal One</button> 
<div class="modal fade default-modal" tabindex="-1" role="dialog" id="modalOne"> 
    <div class="modal-dialog modal-md" role="document"> 
     <div class="modal-content"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button> 
      <a class="next"></a> 
      <a class="prev"></a> 
      <div class="modal-body"> 
      Hello Earth 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

<button class="text-link" data-toggle="modal" data-target="#modalTwo">Modal Two</button> 
<div class="modal fade default-modal" tabindex="-1" role="dialog" id="modalTwo"> 
    <div class="modal-dialog modal-md" role="document"> 
     <div class="modal-content"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button> 
      <a class="next"></a> 
      <a class="prev"></a> 
      <div class="modal-body"> 
      Hello Mars 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 


$(document).ready(function() { 
    $('a.next').on('click', function() { 
     $(this).closest('.modal').css("display", "none"); 
     $(this).closest('.modal').removeClass('in').next().addClass('in').css("display", "block"); 
    }); 
    $('a.prev').on('click', function() { 
     $(this).closest('.modal').css("display", "none"); 
     $(this).closest('.modal').removeClass('in').prev().addClass('in').css("display", "block"); 
    }); 
}); 

Answer 1

は言う：

$(document).ready(function() { 
    $('a.next').on('click', function() { 
     let dialog = $(this).closest('.modal'); 
     dialog.modal('hide'); 
     dialog.next().modal('show'); 
    }); 
    $('a.prev').on('click', function() { 
     let dialog = $(this).closest('.modal'); 
     dialog.modal('hide'); 
     dialog.prev().modal('show'); 
    }); 
});