滚动到下一个或上一个元素

Question

我有一个包含最大3个元素的滚动器，并有向下箭头，可以降低到下一个元素，然后向上箭头返回到以前的元素，但是我很难使其正常工作。

这是html的片段：

<div class="mob-keys-container" id="mob-keys-container">
    <img id="mob-icon-up" src="./images/mob-up-btn.png" alt="down" width="40px">
     <div id="icon-container">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_1_mob" src="./images/5.1.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_2_mob" src="./images/5.2.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_3_mob" src="./images/5.3.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_4_mob" src="./images/5.4.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_5_mob" src="./images/5.5.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_6_mob" src="./images/5.6.png" alt="key">
     </div>
    <img id="mob-icon-down" src="./images/mob-down-btn.png" alt="down" width="40px">
 </div>

这是jQuery：

$('#mob-icon-down').on('click', () => {
// finds visible elements(max 3)
        let $visible = $('.mobIcon:visible');
// finds first element
        let $firstVisible = $visible.first();
// finds last element
        let $lastVisible = $visible.last();
// find next element
        let $nextVisible = $lastVisible.next();
// hides scroller arrow if there are less than 3 elements
        if ($visible.length < 3) {
            $('#mob-icon-down').hide();
        } else {
            $firstVisible.hide();
            $nextVisible.show();
        }

    })

    $('#mob-icon-up').on('click', () => {
// finds visible elements(max 3)
        let $visible = $('.mobIcon:visible');
// finds first element
        let $firstVisible = $visible.first();
// finds last element
        let $lastVisible = $visible.last();
// finds element before the first
        let $prevVisible = $firstVisible.prev();
// hides scroller arrow if there are less than 3 elements
        if ($visible.length < 3) {
            $('#mob-icon-up').hide();
        } else {
            $lastVisible.hide();
            $prevVisible.show();
        }

    })

当没有下一个/上一个元素时，相关箭头应该消失，并且如果这种情况发生变化，但现在是一团糟，但元素计数撞到墙后，元素计数却破裂了，剩下的所有内容均为没有元素，也没有箭头。

Answer 1

// move up
function up() {
    //all currently active elements
  let $active = $('.image.active');
  // last active element
  let $last = $active.last();
  // element before those in the list
  let $prev = $active.prev();
  // remove active class from last/bottom element 
  $last.removeClass('active');
  // add active class to previous element
  $prev.addClass('active');
  check();
}

function down() {
    // exactly as up() just in the other direction
  let $active = $('.image.active');
  let $first = $active.first();
  let $next = $active.next();
  $first.removeClass('active');
  $next.addClass('active');
  check();
}

function check() {
    // all image elements
    let $images = $('.image');
  let $active = $('.image.active');
  let $first = $active.first();
  let $last = $active.last();
    // if the last element is the last image, disable the down button
  if($last.index() === $images.length - 1) {
    $('#moveDown').attr('disabled', true);
  }else{
  // otherwise, enable it
    $('#moveDown').attr('disabled', false);
  }
  
  // if the first active element is the first image, disable the up button
  if($first.index() === 0) {
    $('#moveUp').attr('disabled', true);
  }else{
  // otherwise enable it
    $('#moveUp').attr('disabled', false);
  }
}

function init(elementsToShow ) {
  // set active class on the first 3 elements
  $('.image').slice(0, elementsToShow).addClass('active');
  // set the up Button to disabled
  $('#moveUp').attr('disabled', true);
}

$(document).ready(function() {
    // init the container with max number of elments to show
  init( 3 );
})

.btn-group {
  background: #F1F1F1;
  border-bottom: 1px solid #CECECE;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 10px;
  position: fixed;
  top: 0;
  left: 0;
}

.container {
  margin-top: 70px;
  padding: 10px;
  border-bottom: 2px solid #333;
}

.image {
  width: 100%;
  height: 100px;
  background: red;
  border: 1px solid white;
  display: none;
}

.image.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group">
  <button onClick="down()" id="moveDown">
    DOWN
  </button>
  <button onClick="up()" id="moveUp">
    UP
  </button>
</div>
<div class="container">
  <div class="image"><h1>1</h1></div>
  <div class="image"><h1>2</h1></div>
  <div class="image"><h1>3</h1></div>
  <div class="image"><h1>4</h1></div>
  <div class="image"><h1>5</h1></div>
  <div class="image"><h1>6</h1></div>
  <div class="image"><h1>7</h1></div>
  <div class="image"><h1>8</h1></div>
  <div class="image"><h1>9</h1></div>
  <div class="image"><h1>10</h1></div>
</div>