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 part

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

    };
};

这是您的fiddle

简单的自定义JavaScript滚动条

1 个答案: