显示更多和更少的 JavaScript 时出错

Question

我有两个表格，我需要显示更多和更少的功能。我是使用 javascript 构建的，当我在一个表上单击显示越来越多时，它工作正常，但是当同时单击表 1 和表 2 上显示更多时，我需要单击较少显示两到三次才能返回之前。

这是 js 脚本

$(function () {
x=6;
$('#table1 li').slice(0, 6).show();
$('#showLess').hide();
$('#table2 li').slice(0, 6).show();
$('#less').hide();
$('#loadMore').on('click', function (e) {
e.preventDefault();
x = x+7;
$('#table1 li').slice(0, x).slideDown();
$('#showLess').show();
$('#loadMore').hide();
});
$('#showLess').click(function () {
x=(x-7<0) ? 6 : x-7;
$('#table1 li').not(':lt('+x+')').hide();
$('#showLess').hide();
$('#loadMore').show();
if(x = 6){
$('#showLess').hide();
}
});
$('#more').on('click', function (e) {
e.preventDefault();
x = x+7;
$('#table2 li').slice(0, x).slideDown();
$('#less').show();
$('#more').hide();
});
$('#less').click(function () {
x=(x-7<0) ? 6 : x-7;
$('#table2 li').not(':lt('+x+')').hide();
$('#less').hide();
$('#more').show();
if(x = 6){
$('#less').hide();
}
});
});

这是 html 代码

<style>
#table1 li{
display:none;
}
#table2 li{
display:none;
}
</style>

<ul id="table1">                                                     
<li style="text-align:left">- &nbsp; One</li>
<li style="text-align:left">- &nbsp; Two</li>
<li style="text-align:left">- &nbsp; Three</li>
<li style="text-align:left">- &nbsp; Four</li>
<li style="text-align:left">- &nbsp; Five</li>
<li style="text-align:left">- &nbsp; Six</li>
<li style="text-align:left">- &nbsp; Seven</li>
<li style="text-align:left">- &nbsp; Eight</li>
<li style="text-align:left">- &nbsp; Nine</li>
<li style="text-align:left">- &nbsp; Ten</li>
<li style="text-align:left">- &nbsp; Eleven</li>
<li style="text-align:left">- &nbsp; Twelve</li>
<li style="text-align:left">- &nbsp; Thirteen</li>
</ul>
<div id="loadMore">More</div>
<div id="showLess">Less</div>
<ul id="table2">                                                     
<li style="text-align:left">- &nbsp; One</li>
<li style="text-align:left">- &nbsp; Two</li>
<li style="text-align:left">- &nbsp; Three</li>
<li style="text-align:left">- &nbsp; Four</li>
<li style="text-align:left">- &nbsp; Five</li>
<li style="text-align:left">- &nbsp; Six</li>
<li style="text-align:left">- &nbsp; Seven</li>
<li style="text-align:left">- &nbsp; Eight</li>
<li style="text-align:left">- &nbsp; Nine</li>
<li style="text-align:left">- &nbsp; Ten</li>
<li style="text-align:left">- &nbsp; Eleven</li>
<li style="text-align:left">- &nbsp; Twelve</li>
<li style="text-align:left">- &nbsp; Thirteen</li>
</ul>
<div id="more">More</div>
<div id="less">Less</div>

你知道代码的错误在哪里吗？

谢谢

Answer 1

我已经找到了解决方案。

我需要给出另一个不同的变量名称，例如 a 和 b。错误是因为我只在两个条件下放置相同的变量名