简单的自定义JavaScript滚动条

我需要列出一些标题。一次只能看到其中的6个。我不允许使用任何外部库。一切工作正常，除非我点击down向下滚动列表并且点击up，列表仅在第二次点击后向上滚动。简单的自定义JavaScript滚动条

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

希望你的帮助，请考虑我现在只学习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/

来源

2014-05-06 A1exandr

您需要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

来源

2014-05-06 15:26:52 Vickel

好吧，我觉得愚蠢现在））是不是足够的递增和运行功能时点击作出后递减每个变量一次？ – A1exandr

@ A1exandr：是的，在scrollMailDown（）函数中，可以使用'targetOptTop ++; targetOptDown ++;'但在课堂操纵之后。所以你实际上可以忘掉你的位置变量，这是不需要的。请参阅以下示例：http：//jsfiddle.net/qxHT5/4/ – Vickel

问题 'targetOptTop--; targetOptDown - ;' 以外的功能是，如果有人点击几次（在下降之前）变量是-1，并开始下降，我们需要再次点击几次。 – A1exandr

简单的自定义JavaScript滚动条

回答

相关问题