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

Question

我有两个表，我需要显示更多和更少的功能。我是用javascript构建的，当我在一个表上点击show more and less时，它工作得很好，但是当在表1和表2上同时点击show more时，我需要点击show less两三次才能返回。

这是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。