数组的自增值不会超过1
Increment on an array doesn't go passed 1
本文关键字：数组 更新时间：2023-09-26
所以我在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);
});
};
然而，只要我使用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>
是什么导致这个问题?代码一直工作到第2页，或者按照数组'#p2-g1 and 1'。当我试图到达"#p3-g1和2"时，什么都没有发生。就像剧本悬着一样。控制台没有任何输出，也没有任何增量。代码被设置为在任何事情发生之前递增，因此我应该能够单击. arraynumber按钮并警告出值。该值仍然输出#p2-g1和1，即使应该运行增量。
解决方案实际上是一些奇怪的东西。我在每个隐藏的div中都包含了"next"answers"previous"按钮。它们都包含#next和#previous，如果按钮是切换的，理论上这并不重要，因为脚本本身只监听这些标签。但是，一旦我将按钮从每个单独的页面移开并设置到包含每个页面的div中，它就可以工作了。Jquery中一定有什么东西影响了DOM元素的结构和它所监听的内容，尽管事实上所有这些按钮实际上都包含相同的属性。
我自己也不太明白，但是我;博士，修复只是把下一个和上一个按钮放在别的地方。我的代码工作完美，所以对于一个人谁试图帮助我，谢谢你。对于那个对这个问题投了反对票的人，好吧，我希望你今天过得很糟糕。
相关文章：
- 如何在映射数组中添加换行符
- javascript结合了数组和字典
- 需要帮助设置json数组
- 不能从angular2中的子组件指定父组件中的数组
- 使用JS将数组转换为json对象
- 数组在递归方法中设置为null
- knockoutjs可观察数组
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 将数组从PHP传递到Javascript
- JavaScript数组排序(函数）用于对表行进行排序，而不是排序
- 在函数中添加数组元素的数值
- 无法通过数组映射绑定
- javascript中的数组出错
- 如何使用 node.js 比较两个 json 数组
- Javascript(Angular）从一个对象数组到第二个数组查找值
- 根据id将json数组组合为一个json数组
- 如何通过数组更新角度子范围
- 有没有一种方法可以添加相同的项目val＝“0”;4〃;到JavaScript中数组的每个对象
- 在Javascript中转换对象数组
- Javascript，有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
