简单的自定义javascript滚动

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');
    };
};

这是你的小提琴