Javascript 我只想通过单击Next和preview来显示下一个div。但是找不到任何解决办法

当我单击“全部关闭”时，将显示下一个和上一个div。但我只想通过每次单击“next”来显示下一个div，其余部分应该隐藏起来。对于上一个div，也使用相同的过程。但我找不到任何解决办法。这是我的密码

$(document).ready(function() {
  $(".next").click(function() {
    $(this).nextAll('.first:hidden:first').show();
  });
  $(".pre").click(function() {
    $(this).prevAll('.first:hidden:first').show();
  });
});

<div class="wrapper">
            <div class="pre">preview</div>
             <div class="next">Next</div>
            <div class="first">First</div>
            <div class="first">Second</div>
            <div class="first">Third</div>
            <div class="first">Forth</div>
            <div class="first">Fifth</div>

        </div>

$（文档）.ready（函数（）{
$（“.next”）。单击（函数（）{
$（this）.nextAll（'.first:hidden:first'）.show（）；
});
$（“.pre”）。单击（函数（）{
$（this.prevAll（'.first:hidden:first'）.show（）；
});
});
预览
下一个
弗斯特
第二
第三
向前地
第五

$（文档）.ready（函数（）{
$（“.next”）。单击（函数（）{
$（this.parents（“.wrapper”）.find（“.first”）.slideToggle（）；
});
});

---

它将通过单击下一个div隐藏所有第一个div

这应该可以做到，至少对于下一个按钮是这样的。 只需颠倒前面的逻辑即可

HTML：

<div class="wrapper">
  <div class="prev">Prev</div>
  <div class="next">Next</div>
  <div class="block active">First</div>
  <div class="block">Second</div>
  <div class="block">Third</div>
  <div class="block">Fourth</div>
</div>

JS:

.block{
  display: none;
}

.active{
  display: block;
}

$(function(){
  $('.next').on('click', function(e){
    var $active = $('.active');
    $('.active').removeClass('active');

    if($active.is(':last-child')){
      //  I don't have a next, so show first instead
      $('.block').first().addClass('active');
    } else {
      $active.next().addClass('active')
    }
  });
});

---

首先，我建议重新构造HTML，使其更友好、更有条理

<div class="wrapper">
    <div class="content">
        <div class="first visible">First</div>
        <div class="first">Second</div>
        <div class="first">Third</div>
        <div class="first">Forth</div>
        <div class="first">Fifth</div>
    </div>
    <div class="controls">
        <a class="pre">PREVIOUS</a>
        <a class="next">NEXT</a>
    </div>
</div>

将类应用于可见元素是跟踪显示和隐藏哪些元素的好方法。要使用CSS隐藏其余部分，您需要：

.first:not(:first-child) {
    display: none;
}

这里我唯一没有添加的是处理在第一个元素中单击“Previous”或在最后一个元素中单击“Next”的逻辑

---

下面是它的外观：

这里有一个简单快捷的方法：

$（'.next'）。单击（函数（）{
if（$（'.first:visible'）.next（）.length）{
$（'.first:visible'）.next（）.show（）
$（'.first:visible'）.first（）.hide（）
}
})
$（'.pre'）。单击（函数（）{
if（$（'.first:visible'）.prev（'.first'）.length）{
$（'.first:visible'）.prev（）.show（）
$（'.first:visible'）.last（）.hide（）
}
})
$（'.first'）.first（）.show（）

。首先{
显示：无；
}

以前的
下一个
弗斯特
第二
第三
向前地
第五

作为正确方向的轻推，

$（this.prevAll（'.first'）

首先查找类

中出现在
$（this）
之前的所有元素。因此，您正在查找出现在
.pre
之前的
.first
元素，其中没有任何元素。此外，您仅使用
.show（）。如果在任何时候只有一个
.first
元素可见，您需要使用
hide（）
。如果您给我一个示例代码，它将对我很有帮助。Aka，请为我完成我的工作。这对下一个很好，但对上一个没有任何活动。谢谢，非常感谢。我需要这个东西。一切都很好。如果请帮助我限制当我到达最后一个分区时，它将不会为下一个分区和预览提供任何活动。非常感谢。我已经编辑了我的答案并更新了JSFIDLE链接。没问题。如果你觉得你的问题得到了充分的回答，你的问题解决了，请考虑。
$(document).ready(function() {

    $(".next").click(function() {
        //Show previous button
        $('.pre').show();

        //Find the element that's currently showing
        $showing = $('.content .first.visible').first();

        //Find the next element
        $next = $showing.next();

        //Change which div is showing
        $showing.removeClass("visible").hide();
        $next.addClass("visible").show();

        //If there's no more elements, hide the NEXT button
        if (!$next.next().length) {
            $(this).hide();
        }
    });

    $(".pre").click(function() {
        $('.next').show();

        $showing = $('.content .first.visible').first();
        $next = $showing.prev();
        $showing.removeClass("visible").hide();
        $next.addClass("visible").show();

        if (!$next.prev().length) {
            $(this).hide();
        }
    });

});

.first:not(:first-child) {
    display: none;
}