Как добавить класс нужному набору элементов?
Всем привет, подскажите как можно реализовать следующее:
в контейнере есть набор элементов (div) с одинаковыми классами, у первых 15-ти нет класса hidden, у всех остальных есть. По кнопке "Показать еще" у каждых следующих 15-ти элементов снимается класс hidden и они отображаются. Допустим, мы 3 раза кликнули по кнопке "Показать еще" и у нас всего открыто 60 элементов. И предположим, мы кликнули на элемент который располагается 33-м в общем списке, то есть находится в третьей группе из 15-ти элементов. Как при этом скрыть заново те группы, которые ниже той, в которой находится кликнутый элемент, то есть добавить класс hidden элементам, которые имеют условные порядковые номера с 46 по 60? |
Показать ещё
Volonter,
как вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.red>div.hidden~div {
display: none;
}
.red>div.hidden:not(:last-child):after {
content: 'Показать еще';
display: block;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="red">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div class="hidden">15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div>
<div>43</div>
<div>44</div>
<div>45</div>
<div>46</div>
<div>47</div>
<div>48</div>
<div>49</div>
<div>50</div>
<div>51</div>
<div>52</div>
<div>53</div>
<div>54</div>
<div>55</div>
<div>56</div>
<div>57</div>
<div>58</div>
<div>59</div>
<div>60</div>
</div>
<script>
document.querySelector('.red').addEventListener('click', function(event) {
let children = [...this.children];
let hidden = document.querySelector('.red > .hidden');
let target = event.target.closest('.red > div');
let index = children.indexOf(target);
if (hidden === target) index += 15;
else index = Math.ceil(index / 15) * 15 - 1;
hidden?.classList.remove('hidden');
children[index]?.classList.add('hidden');
})
</script>
</body>
</html>
|
Цитата:
|
рони,
Приветствую! Прошу прощения за назойливость, сможете немного изменить ваш код, другие вводные появились. Все тоже самое, только не по клику на элемент, а при загрузке страницы получив id элемента из url Я попробовал, но ничего не получилось, элемент по урл получаю так: сам урл https://site.name?pr_id=33
let url_string = window.location.href;
let url = new URL(url_string);
let itemID = url.searchParams.get("pr_id");
А вот дальше я ваш код модифицировать не осилил)) Буду очень благодарен! |
Volonter,
document.addEventListener('DOMContentLoaded', function() {
let url_string = window.location.href;
let url = new URL(url_string);
let itemID = url.searchParams.get("pr_id");
let hidden = document.querySelector('.red > .hidden');
hidden?.classList.remove('hidden');
let index = Math.ceil(itemID / 15) * 15 - 1; // let index = Math.ceil((itemID - 1)/ 15) * 15 - 1;
document.querySelector('.red > div')[index]?.classList.add('hidden');
})
|
| Часовой пояс GMT +3, время: 19:22. |