跟踪当前段并将其放入字符串格式

Question

下午好,

我正在努力完成我的网站上的最后一部分，我就快到了，但我已经抓狂了，我已经盯着这个看了好几天了，不知道我错在哪里了。

我使用向上和向下按钮来调用加载下一节或上一节的JQuery脚本。

这是JQuery代码。

    <script>

function getCurrentSection () {
    var cutoff = $(window).scrollTop();
    var curIndex = 0;
    for(var index = 0; index < $('section').length; index++){
        if ($('section').eq(index).offset().top >= cutoff) {
            curIndex = index;
            break;
        }
    }
    return curIndex;
};

$( document ).ready(function() {

      var curIndex = getCurrentSection();
      curIndex += curIndex +1;
      var maxSec = $('section').length;

    document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + maxSec.toString();

});

$('#scrollWindowUp').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();
    var maxSec = $('section').length;

        document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + maxSec.toString();

    if (curIndex === 0) { return; }
    $('html, body').animate({ scrollTop: ($('section').eq(curIndex-1).offset().top - 1)},500);


});

$('#scrollWindowDown').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();
    var maxSec = $('section').length;

     document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + maxSec.toString();

    if (curIndex === $('section').length) { return; }
    var cutoff = $(window).scrollTop();
    if ($('section').eq(curIndex).offset().top !== cutoff+1) { curIndex = curIndex-1; } /* Check if the current section is at the top of the page or has been scrolled */

    $('html, body').animate({ scrollTop: ($('section').eq(curIndex+1).offset().top - 1)},500);

});

</script>

它由我的List调用，下面是调用JQuery的代码。

    <ul class="list-group fixed-pagination">
      <li class="list-group-item pagButton"><a href="#" id="scrollWindowUp"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a></li>

  <li class="list-group-item pagButton"><p id="sectionText"></p></li>

  <li class="list-group-item pagButton"><a href="#" id="scrollWindowDown"><span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
</ul>

这个列表固定在屏幕的一侧，在跨度中，我想让它检测页面的最大区段数量，然后说出用户当前所在的区段。

它就在那里，并得到了最大的部分，但当我点击向上和向下它疯狂与当前的部分编号，当页面最初加载时，我也希望它说当前的部分将是1。

希望你能帮助我，看看我哪里错了，我的当前页面是http://diosa.smudgehost.co.uk，你可以看到我所取得的成就和页面上发生的事情。

谢谢

Answer 1

我设法自己修复了它，我通过修改代码来修复它，以防有人想要使用它。

var CurSect = getCurrentSection();
var CurNum = CurSect+1;
var MaxSect = $('section').length;

$( document ).ready(function() {

document.getElementById("sectionText").innerHTML = CurNum.toString() + " / " + MaxSect.toString();
});

function getCurrentSection () {
    var cutoff = $(window).scrollTop();
    var curIndex = 0;
    for(var index = 0; index < $('section').length; index++){
        if ($('section').eq(index).offset().top >= cutoff) {
            curIndex = index;

            break;
        }
    }
    return curIndex;

};


$('#scrollWindowUp').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();

    if (curIndex === 0) { return; }

    document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + MaxSect.toString();

    $('html, body').animate({ scrollTop: ($('section').eq(curIndex-1).offset().top - 1)},500);

});

$('#scrollWindowDown').click(function(e){
    e.preventDefault();
    var curIndex = getCurrentSection();

    if (curIndex === $('section').length) { return;  }


    var cutoff = $(window).scrollTop();
    if ($('section').eq(curIndex).offset().top !== cutoff+1)
    { 
        curIndex = curIndex-1; 
    } /* Check if the current section is at the top of the page or has been scrolled */

    $('html, body').animate({ scrollTop: ($('section').eq(curIndex+1).offset().top - 1)},500);

    curIndex+=2;

    document.getElementById("sectionText").innerHTML = curIndex.toString() + " / " + MaxSect.toString();

});