Форум

Volonter · #1 (**permalink**) 14.06.2024, 19:53

Всем привет, подскажите как можно реализовать следующее:
в контейнере есть набор элементов (div) с одинаковыми классами, у первых 15-ти нет класса hidden, у всех остальных есть. По кнопке "Показать еще" у каждых следующих 15-ти элементов снимается класс hidden и они отображаются. Допустим, мы 3 раза кликнули по кнопке "Показать еще" и у нас всего открыто 60 элементов. И предположим, мы кликнули на элемент который располагается 33-м в общем списке, то есть находится в третьей группе из 15-ти элементов. Как при этом скрыть заново те группы, которые ниже той, в которой находится кликнутый элемент, то есть добавить класс hidden элементам, которые имеют условные порядковые номера с 46 по 60?

рони · #2 (**permalink**) 15.06.2024, 01:51

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>

Volonter · #3 (**permalink**) 16.06.2024, 17:07

Сообщение от рони

как вариант ...

Спасибо маэстро! То что нужно!

Volonter · #4 (**permalink**) 18.06.2024, 21:02

рони,
Приветствую! Прошу прощения за назойливость, сможете немного изменить ваш код, другие вводные появились. Все тоже самое, только не по клику на элемент, а при загрузке страницы получив 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");

А вот дальше я ваш код модифицировать не осилил))
Буду очень благодарен!

рони · #5 (**permalink**) 19.06.2024, 14:36

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');
})

Форум

Справочник

Discord чат

Курсы javascript