简单自定义javascript scroller

Question

我需要列出一些头衔。一次只能看到其中的6个。我不允许使用任何外部库。一切正常，除非我单击down向下滚动列表，而不是单击up，列表只在第二次单击后滚动。

我知道问题出在持有列表位置和函数的全局变量中，但我不明白为什么它们只在第二次单击之后才更新，而不是第一个！

感谢您的帮助，请考虑一下，我现在只是在学习JS。

html部件

       <div class="mailOptions">
        <div class="incProducts">
          <h3>Include Products</h3>
          <div class="moveOptUp"><span>UP</span></div>
          <nav class="allMailOptions">
            <div class="mailOpt" id="mailOpt_1">
              <span class="optWithMarks"></span>
              <span class="mailOptName">1 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_2">
              <span class="optWithMarks"></span>
              <span class="mailOptName">2 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_3">
              <span class="optWithMarks"></span>
              <span class="mailOptName">3 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_4">
              <span class="optWithMarks"></span>
              <span class="mailOptName">4 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_5">
              <span class="optWithMarks"></span>
              <span class="mailOptName">5 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_6">
              <span class="optWithMarks"></span>
              <span class="mailOptName">6 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt hide" id="mailOpt_7">
              <span class="optWithMarks"></span>
              <span class="mailOptName">7 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt hide" id="mailOpt_8">
              <span class="optWithMarks"></span>
              <span class="mailOptName">8 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt hide" id="mailOpt_9">
              <span class="optWithMarks"></span>
              <span class="mailOptName">9 abcdefg</span>
              <span class="optMarked"></span>
            </div>
          </nav>
          <div class="moveOptDown"><span>DOWN</span></div>
        </div>
      </div>

js部分

    var targetOptTop = 1;
var targetOptDown = 7;
var targetOptLast = ($(".allMailOptions").children().length);


$('#popUpMail ').click(function(e) {
    event.preventDefault();
    //$('#popUp').removeClass('hide');
    $('.popUpEmail').addClass('show');
});

$('.cntrl-discard').click(function() {
    $('.popUpEmail').removeClass('show');
});

$('.mailOpt').click(function() {
    var id = ($(this).attr('id'));
    var idCheckBox = id.split("_");
    var idCheckBox = idCheckBox[1];

    $('.mailOpt').removeClass('activeOpt');
    $(this).addClass('activeOpt');

    $('.allIncQuotes').addClass('hide');
    $('#checkBl_' + idCheckBox).removeClass('hide');
});

function scrollMailDown(position) {
    console.log(targetOptTop);
    console.log(targetOptDown);

    if (targetOptDown < targetOptLast+1) {
        $('.mailOpt:nth-child(' + targetOptTop + ')').addClass('hide');
        $('.mailOpt:nth-child(' + targetOptDown + ')').removeClass('hide');
        targetOptTop += position;
        targetOptDown += position;
    };
};

function scrollMailUp(position) {
    console.log(targetOptTop);
    console.log(targetOptDown);

    if (targetOptTop >= 1) {
        $('.mailOpt:nth-child(' + targetOptTop + ')').removeClass('hide');
        $('.mailOpt:nth-child(' + targetOptDown + ')').addClass('hide');
        targetOptTop += position;
        targetOptDown += position;
    };
};

$('.moveOptDown').click(function() {
    scrollMailDown(+1);
});

$('.moveOptUp').click(function() {
    scrollMailUp(-1);
});

jsFiddle http://jsfiddle.net/A1ex5andr/qxHT5/1/

Answer 1

在像这样删除类之前，需要对计数器进行decrement：

function scrollMailUp(position) {
    console.log(targetOptTop);
    console.log(targetOptDown);
        targetOptTop--;
        targetOptDown--;
    if (targetOptTop >= 1) {

        $('.mailOpt:nth-child(' + targetOptTop + ')').removeClass('hide');
        $('.mailOpt:nth-child(' + targetOptDown + ')').addClass('hide');

    };
};

这是你的小提琴