Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.05.2021, 22:46
Аватар для nastya97core
Аспирант
Отправить личное сообщение для nastya97core Посмотреть профиль Найти все сообщения от nastya97core
 
Регистрация: 04.04.2020
Сообщений: 60

Как переключать кнопки и собирать массив?
Здравствуйте. Есть вот такая конструкция: https://jsfiddle.net/gojpc5ru/

последний этап: формирование массива - вроде мне удался, хотя я не уверена, что я всё правильно сделала... может оно не так должно писаться?

но вот с кнопкой я не могу.

Логика такая:
  • одно нажатие по блоку - добавляет класс active
  • одно нажатие по другому блоку - убирает класс у предыдущего блока и добавляет класс новому блоку
  • второе нажатие по активному блоку - убирает у него класс active
  • нажатие на кнопку "Добавить" убирает внутри группы все active и добавляет запись в массив
  • Внутри группы может существовать только 1 класс active

спотык у меня на моменте, что я дважды должна писать parentNode. Это норм? ну и проблема с отменой класса при нажатии на другой блок.
Ответить с цитированием
  #2 (permalink)  
Старый 02.05.2021, 23:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

зависимые клики по блокам, один активный блок
nastya97core,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .group {
            background: #cccccc;
            margin: 20px;
            width: min-content;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .blocks {
            display: flex;
        }
        p {
            flex-basis: 100%
        }
        .block {
            width: 50px;
            height: 50px;
            margin: 5px;
            cursor: pointer;
            background: blue;
            color: white;
            font-size: 24px;
            text-align: center;
            line-height: 50px;
        }
        .active {
            background: red;
        }
        .enter {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            background: #999999;
            margin: 5px
        }
    </style>
    <script>
        const array = [];
        document.addEventListener("click", ({ target }) => {
            const parent = target.closest(".group");
            if (!parent) return;
            const active = parent.querySelector(".active");
            if (target.classList.contains("block")) {
                target.classList.toggle("active");
                if (active && target != active) active.classList.remove("active");
            }
            if (target.classList.contains("enter") && active) {
                const name = parent.querySelector(".name").textContent;
                const activeSize = active.textContent;
                active.classList.remove("active");
                array.push([name, activeSize])
                show.textContent = JSON.stringify(array, "", "");
            }
        });
    </script>
</head>
<body>
    <pre id="show"></pre>
    <div class="group">
        <p class="name">Первый</p>
        <div class="blocks">
            <div class="block">1</div>
            <div class="block">2</div>
            <div class="block">3</div>
            <div class="block">4</div>
        </div>
        <div class="enter">Добавить</div>
    </div>
    <div class="group">
        <p class="name">Второй</p>
        <div class="blocks">
            <div class="block">1</div>
            <div class="block">2</div>
            <div class="block">3</div>
            <div class="block">4</div>
        </div>
        <div class="enter">Добавить</div>
    </div>
    <div class="group">
        <p class="name">Третий</p>
        <div class="blocks">
            <div class="block">1</div>
            <div class="block">2</div>
            <div class="block">3</div>
            <div class="block">4</div>
        </div>
        <div class="enter">Добавить</div>
    </div>
</body>
</html>

Последний раз редактировалось рони, 03.05.2021 в 13:00.
Ответить с цитированием
  #3 (permalink)  
Старый 05.05.2021, 11:59
Аватар для nastya97core
Аспирант
Отправить личное сообщение для nastya97core Посмотреть профиль Найти все сообщения от nastya97core
 
Регистрация: 04.04.2020
Сообщений: 60

рони,
Спасибо огромное. Я не рассчитывала получить готовый результат, но сильно на это надеялась)

У меня ещё один вопрос. Я немного изменила ваш код, но упёрлась в возможное отсутствие объекта

for (let i = 0, count = toCart.length; i < count; i++) {
  toCart[i].addEventListener("click", function() {
    let parent = this.closest(".info");
    let myactive = parent.querySelector(".active-size");
    let name = parent.querySelector(".name-item").innerText;
    let btnsize = parent.querySelector(".btn-size");
    if ((btnsize && myactive) || !btnsize) {
        let size = myactive.innerText || false;
        addToCart([name, size], this);
        myactive.classList.remove("active-size");
      } else {
        animErrShake(".head-size p");
      }

  });
}


У меня есть ситуация, когда btnsize может вообще не быть, тогда кнопка должна нажаться и отправить в массив второе значение false.

Я делаю
// если есть кнопка и она активна либо если кнопки вообще нет
if ((btnsize && myactive) || !btnsize) {
// и вот здесь myactive может не быть, а я пытаюсь достать из него innerText
// на этом месте у меня как раз и возвращает ошибку
let size = myactive.innerText || false;


вообще вот так у меня работает:
if (btnsize) {
      if (myactive) {
        let size = myactive.innerText;
        addToCart([name, size], this);
        myactive.classList.remove("active-size");
      } else {
        animErrShake(".head-size p");
      }
    } else {
      addToCart([name, false], this);
    }


просто тут дважды addToCart вызывается и я думала как-нибудь оптимизировать код.

Скажите пожалуйста, что можно сделать с этой строчкой?
let size = myactive.innerText || false;
Ответить с цитированием
  #4 (permalink)  
Старый 05.05.2021, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

nastya97core,
не могу помочь, не понимаю описание.
Ответить с цитированием
  #5 (permalink)  
Старый 05.05.2021, 14:53
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от nastya97core
let size = myactive.innerText || false;
Как вариант...

let size = myactive ? myactive.innerText || false : false;
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Массив не вставляется в группу. Как обойти это ограничение? Sauron Общие вопросы Javascript 0 20.01.2020 22:58
Как в шаблоне диррективы узнать массив это или строка? delias Angular.js 1 18.03.2014 07:33
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как получить javasript массив из php? dima_tr AJAX и COMET 6 01.02.2013 03:37
Как лучше сделать глобальный массив skyfish AJAX и COMET 4 17.02.2009 18:05