Упростите код jQuery, используемый, чтобы показать / скрыть диапазон n-го дочернего элемента - PullRequest
Новая
       19

Упростите код jQuery, используемый, чтобы показать / скрыть диапазон n-го дочернего элемента

0 голосов
/ 28 февраля 2019

Я работаю над школьным проектом и немного перегружен работой и не могу найти способ облегчить этот код ↓. 

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>

Класс, который он переключает, просто отображается: нет;

1 Ответ

0 голосов
/ 28 февраля 2019

Я бы удалил атрибуты onclick из этих span элементов и связал бы один обработчик в коде: 

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>
...