Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.06.2024, 19:53
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 93

Как добавить класс нужному набору элементов?
Всем привет, подскажите как можно реализовать следующее:
в контейнере есть набор элементов (div) с одинаковыми классами, у первых 15-ти нет класса hidden, у всех остальных есть. По кнопке "Показать еще" у каждых следующих 15-ти элементов снимается класс hidden и они отображаются. Допустим, мы 3 раза кликнули по кнопке "Показать еще" и у нас всего открыто 60 элементов. И предположим, мы кликнули на элемент который располагается 33-м в общем списке, то есть находится в третьей группе из 15-ти элементов. Как при этом скрыть заново те группы, которые ниже той, в которой находится кликнутый элемент, то есть добавить класс hidden элементам, которые имеют условные порядковые номера с 46 по 60?
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2024, 01:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Показать ещё
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>

Последний раз редактировалось рони, 15.06.2024 в 02:00.
Ответить с цитированием
  #3 (permalink)  
Старый 16.06.2024, 17:07
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 93

Сообщение от рони
как вариант ...
Спасибо маэстро! То что нужно!
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2024, 21:02
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 93

рони,
Приветствую! Прошу прощения за назойливость, сможете немного изменить ваш код, другие вводные появились. Все тоже самое, только не по клику на элемент, а при загрузке страницы получив 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

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');
})
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как добавить еще один селектор foxfor jQuery 1 29.05.2015 12:32
Как добавить и удалить класс при нажатии на div? Jeick9 Events/DOM/Window 23 10.03.2015 16:05
как проверить класс в одном блоке и добавить в другой webdesing25 jQuery 1 18.07.2014 02:37
как через javascript добавить класс элементу? LeeRoy Элементы интерфейса 1 12.06.2014 23:42
JS классы - как объединить функции в класс olga153b Events/DOM/Window 3 01.11.2011 14:13