Форум

DivMan · #1 (**permalink**) 19.10.2019, 18:40

Сделал простой слайдер, если листать следующий слайдер, то показываются проценты (количество просмотреных слайдов) и отображается с глюками.

Если пролисать до последнего слайда, покажет 100% и если сделать шаг назад, то останется это же количество и если потом опять нажать вперёд, то покажет не все проценты, при просмотре всех слайдов.

И если промотать на первый слайд, то покажет 17%, а по идеи должно быть 0.

Я взял всё количество слайдов "allQuestion", узнал текущий слайд "openSlide.dataset.numberQuestion" и из этого посчитал проценты

<style>
    .next-question {
        border: 1px solid;
        margin-bottom: 20px;

        width: 400px;
        height: 400px;
        text-align: center;
        vertical-align: middle;
    }

    .open {
        display: block;
    }
</style>

<div></div>
<div style="" class="next-question open" data-number-question="1">
    Слайд 1             
</div>

<div style="display: none;" class="next-question" data-number-question="2">
    Слайд 2            
</div>

<div style="display: none;" class="next-question" data-number-question="3">
    Слайд 3            
</div>

<div style="display: none;" class="next-question" data-number-question="4">
    Слайд 4            
</div>

<div style="display: none;" class="next-question" data-number-question="5">
    Слайд 5            
</div>

<div style="display: none;" class="next-question" data-number-question="6">
    Слайд 6            
</div>
<div></div>


<button class="quiz-buttons__button_prev">Назад</button>
<button class="quiz-buttons__button_next-text">Вперёд</button>
<br><br>
<span class="percent">0%</span> <span>просмотрено</span>



<script>

    var allQuestion = document.querySelectorAll('.next-question');
    var percent = document.querySelector('.percent');
    var nextQuestion = document.querySelector('.quiz-buttons__button_next-text');
    var prevQuestion = document.querySelector('.quiz-buttons__button_prev');

    var allQuestion = document.querySelectorAll('.next-question');
    
    function closeQuestion() {
        allQuestion.forEach(function (question, i) {
            question.style.display = 'none';
        })
    }

    function openClose(element) {
        var openSlide = document.querySelector('.open');
        if (element == 'nextElementSibling') {
            var nextElement = openSlide.nextElementSibling;
        } else {
            var nextElement = openSlide.previousElementSibling;
        }
        
        
        //проценты
        percent.innerHTML = (openSlide.dataset.numberQuestion / allQuestion.length * 100).toFixed() + '%';

        numberQuestion = openSlide.dataset.numberQuestion;
        
        if (nextElement.hasAttribute('data-number-question')) {
            closeQuestion();

            openSlide.classList.remove('open');
            nextElement.style.display = 'block';
            nextElement.classList.add('open');
        }



    }


    nextQuestion.addEventListener('click', function (e) {
        openClose('nextElementSibling');
    });


    prevQuestion.addEventListener('click', function (e) {
        openClose('previousElementSibling');
    });
</script>

laimas · #2 (**permalink**) 19.10.2019, 19:07

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

openSlide.dataset.numberQuestion / allQuestion.length * 100

Как проценты считаются?

DivMan · #3 (**permalink**) 19.10.2019, 19:25

Так тоже самое

percent.innerHTML = ((100 * openSlide.dataset.numberQuestion) / allQuestion.length).toFixed() + '%';

laimas · #4 (**permalink**) 19.10.2019, 19:27

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

Так тоже самое

Вот именно, можете еще и пропорцию, все равно не то будет, а значит операнды не соответствуют ожиданиям. Выведите их в консоль, увидите причину.

рони · #5 (**permalink**) 19.10.2019, 19:32

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

если промотать на первый слайд, то покажет 17%, а по идеи должно быть 0.

почему ??? у вас же нет состояния нуль никогда

рони · #6 (**permalink**) 19.10.2019, 20:01

DivMan,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<style>
    .next-question {
        border: 1px solid;
        margin-bottom: 20px;

        width: 400px;
        height: 400px;
        text-align: center;
        vertical-align: middle;
    }
    .next-question{
        display: none;
    }

    .next-question.open {
        display: block;
    }
</style>

<div></div>
<div class="next-question" >
    Слайд 1
</div>

<div  class="next-question" >
    Слайд 2
</div>

<div  class="next-question" >
    Слайд 3
</div>

<div  class="next-question" >
    Слайд 4
</div>

<div  class="next-question" >
    Слайд 5
</div>

<div  class="next-question" >
    Слайд 6
</div>
<div></div>


<button class="quiz-buttons__button_prev">Назад</button>
<button class="quiz-buttons__button_next-text">Вперёд</button>
<br><br>
<span class="percent">0%</span> <span>просмотрено</span>



<script>

    var allQuestion = document.querySelectorAll('.next-question');
    var len = allQuestion.length;
    var percent = document.querySelector('.percent');
    var nextQuestion = document.querySelector('.quiz-buttons__button_next-text');
    var prevQuestion = document.querySelector('.quiz-buttons__button_prev');
    var index = 0;
    var current = allQuestion[index];

    function openClose(up) {
        current.classList.remove('open');
        index = (index + up + len) % len;
        current = allQuestion[index];
        current.classList.add('open');
        percent.innerHTML = (index/(len - 1)  * 100).toFixed() + '%';
       }


    nextQuestion.addEventListener('click', function (e) {
        openClose(1);
    });


    prevQuestion.addEventListener('click', function (e) {
        openClose(-1);
    });

    openClose(0)
</script>

</body>
</html>

DivMan · #7 (**permalink**) 19.10.2019, 20:05

Спасибо

Форум

Справочник

Discord чат

Курсы javascript