Как можно реализовать логику перемещения назад и вперед?

Question

Julian

javascript

Как можно реализовать логику перемещения назад и вперед?

<a href="https://codepen.io/levacheb/pen/ByBBZaZ" rel="nofollow">https://codepen.io/levacheb/pen/ByBBZaZ</a> <br/> Здравствуйте! <br/> У меня возникла проблема: при нажатии на кнопку блок появляется, однако если нажать на кнопку снова, появляется другой блок, который не относится к предыдущему. Как можно это исправить?

25 ноября 2024 г. 15:53

Ответы на вопрос 1

Похожие вопросы

Answer 1

Здравствуйте!

Чтобы реализовать логику перемещения назад и вперед и сделать так, чтобы при повторном нажатии на кнопку исчезал предыдущий блок, можно использовать простую логику переключения видимости. Для этого я предлагаю вам изменить структуру вашего JavaScript-кода.

Пример кода, который поможет вам организовать правильное поведение, может выглядеть так:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Перемещение назад и вперед</title>
    <style>
        .box {
            display: none;
            border: 1px solid #000;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>

<button id="next">Далее</button>
<button id="back">Назад</button>

<div id="box1" class="box">Это блок 1</div>
<div id="box2" class="box">Это блок 2</div>
<div id="box3" class="box">Это блок 3</div>

<script>
    let boxes = document.querySelectorAll('.box');
    let currentIndex = -1;

    function showBox(index) {
        if (currentIndex !== -1) {
            boxes[currentIndex].style.display = 'none';
        }
        currentIndex = index;
        boxes[currentIndex].style.display = 'block';
    }

    document.getElementById('next').addEventListener('click', function() {
        if (currentIndex < boxes.length - 1) {
            showBox(currentIndex + 1);
        }
    });

    document.getElementById('back').addEventListener('click', function() {
        if (currentIndex > 0) {
            showBox(currentIndex - 1);
        }
    });
</script>

</body>
</html>
```

### Как работает код:
1. **HTML**: у нас есть три блока и две кнопки: "Далее" и "Назад".
2. **CSS**: блоки изначально скрыты (`display: none`).
3. **JavaScript**:
   - Мы собираем все блоки в массив (`boxes`) и инициализируем `currentIndex` со значением `-1`, чтобы обозначить, что никаких блоков не отображается.
   - Функция `showBox` скрывает текущий блок и отображает новый на основе переданного индекса.
   - Обработчик события на кнопке "Далее" увеличивает индекс текущего блока и отображает следующий.
   - Обработчик события на кнопке "Назад" уменьшает индекс текущего блока и отображает предыдущий.

Этот код позволит вам переходить между блоками назад и вперед, прячь предыдущий блок при открытии нового.