Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.10.2019, 19:40
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 428

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

Если пролисать до последнего слайда, покажет 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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.10.2019, 20:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,140

Сообщение от DivMan
openSlide.dataset.numberQuestion / allQuestion.length * 100
Как проценты считаются?
Ответить с цитированием
  #3 (permalink)  
Старый 19.10.2019, 20:25
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 428

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

percent.innerHTML = ((100 * openSlide.dataset.numberQuestion) / allQuestion.length).toFixed() + '%';
Ответить с цитированием
  #4 (permalink)  
Старый 19.10.2019, 20:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,140

Сообщение от DivMan
Так тоже самое
Вот именно, можете еще и пропорцию, все равно не то будет, а значит операнды не соответствуют ожиданиям. Выведите их в консоль, увидите причину.
Ответить с цитированием
  #5 (permalink)  
Старый 19.10.2019, 20:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,061

Сообщение от DivMan
если промотать на первый слайд, то покажет 17%, а по идеи должно быть 0.
почему ??? у вас же нет состояния нуль никогда
Ответить с цитированием
  #6 (permalink)  
Старый 19.10.2019, 21:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,061

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>
Ответить с цитированием
  #7 (permalink)  
Старый 19.10.2019, 21:05
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 428

Спасибо
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поправить JS djsadd Общие вопросы Javascript 1 26.03.2012 11:27
Небольшой скрипт - подскажите как поправить Volonter Events/DOM/Window 6 03.02.2012 11:24
Как изменить эффект смены картинок в слайдере? Kotanol jQuery 2 24.11.2011 19:35
Решение задачи (теста) или как вычислить правильный ответ? Remarkus Общие вопросы Javascript 0 25.04.2011 10:50
не понимаю как задать правильный контекст loz Dojo toolkit 2 17.02.2011 18:36