Javascript 数组上的增量不为'；我不能通过考试

因此，我使用引导在jquery中创建分页。我的HTML工作得很好，因为我使用它的代码更难看，更长，涉及200行左右的调用函数。我试图避免这种情况，因此数组

在第2页之后，整个代码都不起作用，我也不知道为什么。我已经对它进行了最大程度的简化，甚至在没有任何jquery的情况下对它进行了测试，并从数组中提醒要使用的数字以及数组正在使用的字符串

var paginationTable = ['#p1-g1','#p2-g1','#p3-g1','#p4-g1','#p5-g1', // All spicer pages
                       '#p1-g2','#p2-g2','#p3-g2','#p4-g2','#p5-g2', // All saginaw pages
                       '#p1-g3','#p2-g3','#p3-g3','#p4-g3','#p5-g3', // All toyota pages
                       '#p1-g4','#p2-g4','#p3-g4','#p4-g4','#p5-g4']; // All borg-warner pages
var pageNum = 0;
var tabNum = paginationTable[pageNum];     
function productInfo(button, productPage) {
    $(button).click(function(){
        $(productPage).show(200);
    });
    $('#next').click(function(){
        pageNum++;
        tabNum = paginationTable[pageNum];
    });
    $('#previous').click(function(){
        pageNum = pageNum - 1;
        tabNum = paginationTable[pageNum];
    });
    $('.arrayNumber').click(function(){
        alert(tabNum + ' and ' + pageNum);
    });
};

这是我的测试代码。它现在100%有效。当我单击按钮使用“.arrayNumber”单击功能时，它将正确显示pageNum和tabNum。例如，它将显示#p1-g1和0，然后当我执行#下一步时，它将显示#p2-g1和1。它将继续这样做。因此，它工作得很好

然而，一旦我将jQuery添加到它，它就完全崩溃了

var paginationTable = ['#p1-g1','#p2-g1','#p3-g1','#p4-g1','#p5-g1', // All spicer pages
                       '#p1-g2','#p2-g2','#p3-g2','#p4-g2','#p5-g2', // All saginaw pages
                       '#p1-g3','#p2-g3','#p3-g3','#p4-g3','#p5-g3', // All toyota pages
                       '#p1-g4','#p2-g4','#p3-g4','#p4-g4','#p5-g4']; // All borg-warner pages
var pageNum = 0;
var tabNum = paginationTable[pageNum];     
function productInfo(button, productPage) {
    $(button).click(function(){
        $(productPage).show(200);
    });
    $('#next').click(function(){
        pageNum++;
        tabNum = paginationTable[pageNum];
        $('.section-info').hide(200);
        $(tabNum).show(300);
    });
    $('#previous').click(function(){
        pageNum = pageNum - 1;
        tabNum = paginationTable[pageNum];
        $('.section-info').hide(200);
        $(tabNum).show(300);
    });
    $('.arrayNumber').click(function(){
        alert(tabNum + ' and ' + pageNum);
    });
};

当我使用冗长的jquery方法完成这项工作时，一切都正常，它涉及到一系列的类和函数。因此，我的HTML和CSS没有冲突。我已经看了我的HTML上百遍了，所以我不认为这是我的HTML。下面是HTML：

<div class="section-content use-bootstrap">
            <h1>Spicer, Saginaw, Toyota, Borg-Warner Type CV Components</h1>
            <ul>
                <li><a id="g1">Spicer <span class="glyphicon glyphicon-chevron-up"></span></a></li>
                <li><a id="g2">Saginaw <span class="glyphicon glyphicon-chevron-up"></span></a></li>
                <li><a id="g3">Toyota <span class="glyphicon glyphicon-chevron-up"></span></a></li>
                <li><a id="g4">Borg-Warner <span class="glyphicon glyphicon-chevron-up"></span></a></li>
                <li><a id="g5">Close Menus <span class="glyphicon glyphicon-remove-circle"></span></a></li>
            </ul>
            <a href="#" class="btn btn-default btn-lg arrayNumber"><span class="glyphicon glyphicon-heart"></span> Array Number</a>
            <!-- ITEM LIST FOR SPICER -->
                <div id="p1-g1" class="section-info">
                    <div class="section-product">
                        <h1><small>This is the product's name. 1</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name. 1</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name. 1</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name. 1</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name. 1</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <ul class="pagination">
                    <li><a id="previous">Previous Page</a></li>
                    <li><a id="next">Next Page</a></li>
                    </ul>
                </div>
                <div id="p2-g1" class="section-info">
                    <div class="section-product">
                        <h1><small>This is the product's name. 2</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <ul class="pagination">
                    <li><a id="previous">Previous Page</a></li>
                    <li><a id="next">Next Page</a></li>
                    </ul>
                </div>
                <div id="p3-g1" class="section-info">
                    <div class="section-product">
                        <h1><small>This is the product's name. 3</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <ul class="pagination">
                    <li><a id="previous">Previous Page</a></li>
                    <li><a id="next">Next Page</a></li>
                    </ul>
                </div>
                <div id="p4-g1" class="section-info">
                    <div class="section-product">
                        <h1><small>This is the product's name. 4</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <ul class="pagination">
                    <li><a id="previous">Previous Page</a></li>
                    <li><a id="next">Next Page</a></li>
                    </ul>
                </div>
                <div id="p5-g1" class="section-info">
                    <div class="section-product">
                        <h1><small>This is the product's name. 5</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <div class="section-product">
                        <h1><small>This is the product's name.</small></h1>
                        <p>The description of the product.</p>
                        <a href="#">Item Page</a>
                    </div>
                    <ul class="pagination">
                    <li><a id="previous">Previous Page</a></li>
                    <li><a id="next">Next Page</a></li>
                    </ul>
                </div>

斯派塞、萨吉诺、丰田、博格-华纳型CV组件


这是产品的名称。1.
产品说明

这是产品的名称。1.
产品说明

这是产品的名称。1.
产品说明

这是产品的名称。1.
产品说明

这是产品的名称。1.
产品说明



这是产品的名称。
产品说明

这是产品的名称。
产品说明

这是产品的名称。
产品说明

这是产品的名称。
产品说明



这是产品的名称。
产品说明

这是产品的名称。
产品说明

这是产品的名称。
产品说明

这是产品的名称。
产品说明



这是产品的名称。
产品说明

这是产品的名称。
产品说明

这是产品的名称。
产品说明

这是产品的名称。
产品说明



这是产品的名称。
产品说明

这是产品的名称。
产品说明

这是产品的名称。
产品说明

这是产品的名称。
产品说明


上一页
下一页

是什么导致了这个问题？代码将一直运行到第2页或数组“#p2-g1和1”中。当我试图到达'p3-g1和2'时，什么都没有发生。就像是剧本挂了。控制台中没有输出，也没有增量。代码设置为在发生任何事情之前递增，因此我应该