1

Задача следующем: при клике на стрелку вверх или вниз, число счетчика должно или прибавлятся на 1 или уменьшатся, и был активен тот этаж, у которого data атрибут с числом этажа, совпадал с числом в счетчике.

Я реализовал подобный функционал, но только при клике на сам этаж. (число в счетчике меняется в зависимости от этажа на который был произведен клик, и сделал выбраный этаж активным). Как сделать подобное при клике на стрелки вверх/вниз?

Буду очень благодарен за помощь, понятно что на jquery это проще сделать, но хочу понять как делать на чистом js, так как я только начал изучать язык.

Ссылка на проект: https://plupiks.github.io/melody-landing/.

const floors = document.querySelectorAll(".house-floor");
const floorCountNumb = document.querySelector(".hero--value");
const arrowUp = document.querySelector(".hero--arrow-up");
const arrowDown = document.querySelector(".hero--arrow-down");

// При клике на этаж
floors.forEach(e => {

  e.addEventListener('click', function (e) {
    var floorActive = e.target;

    floors.forEach(e => {
      e.classList.remove("house-img--active");
    })

    floorActive.classList.add("house-img--active");

    var floorCount = e.target.dataset.floor;
    floorCountNumb.textContent = floorCount;
  })
})

// При клике на стрелку вверх
arrowUp.addEventListener('click', () => {

})

2 ответа 2

1
let parths = document.querySelectorAll('.house-floor');

// При клике на стрелку вверх

arrowUp.addEventListener('click', function() => {
let value = parseInt(floorCountNumb.innerHTML);

if (value != parths.lenght) {
parths[value-1].classList.remove('house-img--active');
value++;
floorCountNumb.innerHTML = value;
parths[value-1].classList.add('house-img--active');
}
})

// При клике на стрелку вниз

arrowDown.addEventListener('click', function() => {
let value = parseInt(floorCountNumb.innerHTML);

if (value != 0) {
parths[value-1].classList.remove('house-img--active');
value--;
floorCountNumb.innerHTML = value;
parths[value-1].classList.add('house-img--active');
}
})

p.s. Такой код я называю "огородом", из-за того, что две функции практически одинаковые. Для базового понимания сойдет, но для работы желательно написать 1, универсальную функцию. Вот можете на досуге подумать как из этих двух написать одну (молчаливую) функцию.

1
  • Тут правда есть одно но, нужно чтобы первый этаж был не 1 а 02, и небольшой баг, если этаж выбран мышкой то при выборе этажа стрелкой вверх остается 2 выбраных этажа. Но всеравно спасибо за помощь)
    – Vitaliy
    Commented 15 дек. 2021 в 22:42
1

В идеале, наверно, написать как-то так. Надеюсь более или менее понятно описал принцип. Раз учитесь языку, учитесь сразу мыслить как программист, а не тупо изучение api языка.

const floors = document.querySelectorAll('.house-floor')
const floorCountNumb = document.querySelector('.hero--value')
const arrowUp = document.querySelector('.hero--arrow-up')
const arrowDown = document.querySelector('.hero--arrow-down')

const ACTIVE_CLASS = 'house-img--active'
let selectedFloor = null

const resetSelectedFloor = () => {
    floors.forEach((el) => el.classList.remove(ACTIVE_CLASS))
}

const setActiveFloor = (num) => {
    const floor = floors.find((el) => el.dataset.floor === num)
    floor.classList.add(ACTIVE_CLASS)
    displayFloor(num)
    selectedFloor = num
}

const displayFloor = (num) => {
    floorCountNumb.textContent = num
}

// При клике на этаж
/**
 * Реализация необходимого функционала делаится на две части: 
 * сброс текущего активного элемента и назначение нового. Логику конечно можно написать в лоб, 
 * но лучше сразу выделить абстракции и спрятать реализацию за ними. Это позволит мыслить на уровне
 * предметной области и не думать о технической части + станет удобно масштабировть или изменять
 * текущий код. В вашем случае, тот же функционал выполняют кнопки на странице. Также обратите внимание,
 * что я вынес активный этаж в отдельную переменную как состояние, что позволяет достаточно просто
 * переиспользовать функции. Без нее вам бы пришлось выцеплять активный этаж из DOM элемента при нажатии кнопок,
 * что породило бы как минимум одну дополнительную функцию с лишней абстракцией. Также все строки или числа, 
 * которые используются по несколько раз, лучше выделять в отдельные переменные. 
 * В строках можно ошибиться, а с числами иногда не сразу понятно, не зная контекста, что они обозначают.
 */
floors.forEach((el) => {
    el.addEventListener('click', (ev) => {
        resetSelectedFloor()

        const floor = ev.target.dataset.floor

        setActiveFloor(floor)
    })
})

// При клике на стрелку вверх
arrowUp.addEventListener('click', () => {
    resetSelectedFloor()
    setActiveFloor(selectedFloor + 1)
})

arrowDown.addEventListener('click', () => {
    resetSelectedFloor()
    setActiveFloor(selectedFloor - 1)
})
6
  • 1
    Понял, учту) Спасибо
    – Vitaliy
    Commented 15 дек. 2021 в 22:57
  • вообще, правильней даже resetSelectedFloor запихать в setActiveFloor, потому что выбор активного этажа всегда нуждается в сбросе текущего. А в слушателях будет сразу понятно, что делает код, потому что по сути эти две функции являются реализацией одного действия Commented 15 дек. 2021 в 23:03
  • @Vitaliy рад помочь Commented 15 дек. 2021 в 23:04
  • скрип почему-то выдал ошибку "floors.find is not a function"
    – Vitaliy
    Commented 15 дек. 2021 в 23:13
  • @Vitaliy поменяйте на [...floors].find((el) => el.dataset.floor === num) Commented 16 дек. 2021 в 9:51

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.