jquery - 使用上一个/下一个按钮显示/隐藏内容

Question

我有以下 jQuery 代码，您也可以在 JSfiddle 中找到它 here :

/* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).show();
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().show().prev().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().show().next().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:last").show();
        }
        return false;
    });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  
  <div class="panel_button" data-target="#panel1"> PREVIOUS </div>

  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
  
  <div class="panel_button" data-target="#panel1"> NEXT </div>
  
</div>

正如您在上面的代码中所看到的，我根据单击的按钮 显示/隐藏不同的内容。 button_01 到 button_03 单独工作完美。

---

现在，我想使用 here 中的代码添加一个 prev 和 next 按钮但我无法让它发挥作用。
你知道我需要在 jQuery 中的第二个代码中更改什么以使 prev 和 next 按钮工作吗？

Answer 1

您还没有更新您的下一个/上一个按钮以使用更新后的代码，更改:

<div class="panel_button" data-target="#panel1"> PREVIOUS </div>

到

<div id="prev"> PREVIOUS </div>

/* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).show();
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().show().prev().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().show().next().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:last").show();
        }
        return false;
    });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  
  <div id="prev"> PREVIOUS </div>

  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
  
  <div id="next"> NEXT </div>
  
</div>