javascript - 简化用于显示/隐藏第 n 个子项范围的 jQuery 代码

Question

我正在做学校项目，有点过度劳累，找不到简化此 ↓ 代码的方法。

function page1() {$('.gallery a:nth-child(-n+8)').removeClass('hidden');$('.gallery a:nth-child(n+9)').addClass('hidden');};
function page2() {$('.gallery a:nth-child(n+9), .gallery a:nth-child(-n+16)').removeClass('hidden');$('.gallery a:nth-child(-n+8), .gallery a:nth-child(n+17)').addClass('hidden');};
function page3() {$('.gallery a:nth-child(n+17), .gallery a:nth-child(-n+24)').removeClass('hidden');$('.gallery a:nth-child(-n+16), .gallery a:nth-child(n+25)').addClass('hidden');};
function page4() {$('.gallery a:nth-child(n+25), .gallery a:nth-child(-n+32)').removeClass('hidden');$('.gallery a:nth-child(-n+24), .gallery a:nth-child(n+33)').addClass('hidden');};
function page5() {$('.gallery a:nth-child(n+33), .gallery a:nth-child(-n+40)').removeClass('hidden');$('.gallery a:nth-child(-n+32), .gallery a:nth-child(n+41)').addClass('hidden');};
function page6() {$('.gallery a:nth-child(n+41), .gallery a:nth-child(-n+48)').removeClass('hidden');$('.gallery a:nth-child(-n+40), .gallery a:nth-child(n+49)').addClass('hidden');};
function page7() {$('.gallery a:nth-child(n+49), .gallery a:nth-child(-n+56)').removeClass('hidden');$('.gallery a:nth-child(-n+48), .gallery a:nth-child(n+57)').addClass('hidden');};

它的作用是在我的网站上显示/隐藏隐藏图像的范围。单击数字(导航)时 ↓

<p>
    <span class="num highlight" onclick="page1()">1 </span>
    <span class="num" onclick="page2()"> 2</span>
    <span class="num" onclick="page3()"> 3</span>
    <span class="num" onclick="page4()"> 4</span>
    <span class="num" onclick="page5()"> 5</span>
    <span class="num" onclick="page6()"> 6</span>
</p>

它切换的类是simple display: none;

Answer 1

我将从那些 span 元素中删除 onclick 属性，并在代码中绑定(bind)一个处理程序:

var pageSize = 8;
$(".num").click(function () {
    var n = $(this).index() * pageSize;
    $('.gallery a').addClass('hidden').slice(n, n+pageSize).removeClass('hidden');
});

var pageSize = 8;
$(".num").click(function () {
    var n = $(this).index() * pageSize;
    $('.gallery a').addClass('hidden').slice(n, n+pageSize).removeClass('hidden');
})[0].click();

a { padding: 5px }
.hidden { display: none }
.num { border: 1px inset; padding: 5px; cursor: pointer }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Gallery:
<div class="gallery">
    <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a>
    <a>9</a><a>10</a><a>11</a><a>12</a><a>13</a><a>14</a><a>15</a><a>16</a>
    <a>17</a><a>18</a><a>19</a><a>20</a><a>21</a><a>22</a><a>23</a><a>24</a>
    <a>25</a><a>26</a><a>27</a><a>28</a><a>29</a><a>30</a><a>31</a><a>32</a>
    <a>33</a><a>34</a><a>35</a><a>36</a><a>37</a><a>38</a><a>39</a><a>40</a>
    <a>41</a><a>42</a><a>43</a><a>44</a><a>45</a><a>46</a><a>47</a><a>48</a>
</div>
Select page:
<p>
    <span class="num"> 1</span>
    <span class="num"> 2</span>
    <span class="num"> 3</span>
    <span class="num"> 4</span>
    <span class="num"> 5</span>
    <span class="num"> 6</span>
</p>