时间戳

首页 > 解决方案 > 下一个和上一个与 jquery

javascript - 下一个和上一个与 jquery

问题描述

我有一个带有一些引导卡的页面，我想一张一张地显示该卡而不重新加载页面

<div class="card mt-2" id="card-b">
   ...
   <button type="button" id="to-c" class="btn btn-info">Next</button>
</div>
<div class="card mt-2" id="card-c">
   ...
   <button type="button" id="to-d" class="btn btn-info">Next</button>
   <button type="button" id="to-b" class="btn btn-info">Previous</button>
</div>
<div class="card mt-2" id="card-d">
   ...
   <button type="submit" class="btn btn-info">Submit</button>
   <button type="button" id="to-c" class="btn btn-info">Previous</button>
</div>

我的卡体代码很长，所以我用点粘贴它

我已经尝试在 jquery 中像这样使用隐藏和显示

$(document).ready(function($) {
        $('#card-c').hide();
        $('#card-d').hide();

        $('#to-b').click(function() {
            showB();
        })

        $('#to-c').click(function() {
            showC();
        })

        $('#to-d').click(function() {
            showD();
        })


        function showB() {
            $('#card-b').show();
            $('#card-c').hide();
            $('#card-d').hide();
        }

        function showC() {
            $('#card-b').hide();
            $('#card-c').show();
            $('#card-d').hide();
        }

        function showD() {
            $('#card-b').hide();
            $('#card-c').hide();
            $('#card-d').show();
        }

});

当我单击下一个按钮时它工作正常但上一个按钮不起作用

标签： javascriptphpjquery

解决方案

当您可以为所有人创建一个通用事件侦听器并使用一些遍历（例如next()和prev()

$('.btn-next, .btn-prev').click(function(){
    const $btn = $(this), 
          isNext = $btn.hasClass('btn-next'),
          $card = $btn.closest('.card').hide();        
      
          
    const $nextCard = isNext ? $card.next() : $card.prev();       
    $nextCard.show()

});
#toggle-cards .card:not(:first-child) {
   display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle-cards">

<div class="card mt-2" >
   <h3>One</h3>
   <button type="button" class="btn btn-info btn-next">Next</button>
</div>
<div class="card mt-2" >
    <h3>Two</h3>
   <button type="button"  class="btn btn-info btn-next">Next</button>
   <button type="button"  class="btn btn-info btn-prev">Previous</button>
</div>
<div class="card mt-2" >
    <h3>Three</h3>
   <button type="button"  class="btn btn-info btn-next">Next</button>
   <button type="button"  class="btn btn-info btn-prev">Previous</button>
</div>
<div class="card mt-2" >
    <h3>Four</h3>
   <button type="submit" class="btn btn-info">Submit</button>
   <button type="button" class="btn btn-info  btn-prev">Previous</button>
</div>
</div>

推荐阅读