簡單的自定義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滾動條

回答

相關問題