Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как поправить правильный счёт процентов в слайдере? (https://javascript.ru/forum/events/78685-kak-popravit-pravilnyjj-schjot-procentov-v-slajjdere.html)

DivMan 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 19.10.2019 19:07
Цитата:
Сообщение от DivMan
openSlide.dataset.numberQuestion / allQuestion.length * 100
Как проценты считаются?

DivMan 19.10.2019 19:25
Так тоже самое

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

laimas 19.10.2019 19:27
Цитата:
Сообщение от DivMan
Так тоже самое
Вот именно, можете еще и пропорцию, все равно не то будет, а значит операнды не соответствуют ожиданиям. Выведите их в консоль, увидите причину.

рони 19.10.2019 19:32
Цитата:
Сообщение от DivMan
если промотать на первый слайд, то покажет 17%, а по идеи должно быть 0.
почему ??? у вас же нет состояния нуль никогда

рони 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 19.10.2019 20:05
Спасибо


Часовой пояс GMT +3, время: 05:00.