RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1541396
Accepted
hellokitViki
hellokitViki
Asked:2023-09-19 03:21:27 +0000 UTC2023-09-19 03:21:27 +0000 UTC 2023-09-19 03:21:27 +0000 UTC

在测验中设置进度条

  • 772

我正在做一个测验。我不知道如何设置进度条,以便在单击“后退”和“前进”按钮时进度条减少和增加。

$(document).ready(() => {

  let quiz_item = 0;
  $('.quiz-item').each(function(key) {
    quiz_item = key;
  });

  let ind = 1;
  $('.next').click(function() {
    if (!$('.quiz-item').last().hasClass('active')) {
      move(true);

      var i = ind++;

      if (i < 2) {
        $('.progress-bar').css('width', 100 / quiz_item + '%');
      } else {
        $('.progress-bar').css('width', (100 / quiz_item) + (100 / quiz_item) + '%');
      }
    }
  });

  $('.prev').click(function() {
    if (!$('.quiz-item').first().hasClass('active')) {
      move(false);
    }
  });

  function move(direction) {
    direction
      ?
      $('.active')
      .removeClass('active')
      .next()
      .addClass('active') :
      $('.active')
      .removeClass('active')
      .prev()
      .addClass('active');
  }
})
/* line 1, ../quiz/assets/scss/_main.scss */

html,
body {
  font-family: 'Montserrat';
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}


/* Section */


/* line 1, ../quiz/assets/scss/_general.scss */

* {
  margin: 0;
  padding: 0;
}


/* line 6, ../quiz/assets/scss/_general.scss */

body {
  font-family: 'Montserrat';
}


/* line 10, ../quiz/assets/scss/_general.scss */

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important;
}


/* line 35, ../quiz/assets/scss/_general.scss */

select:focus,
input:focus,
textarea:focus {
  border-color: #272727 !important;
  box-shadow: none !important;
}


/* line 42, ../quiz/assets/scss/_general.scss */

input:not([type="checkbox"]),
textarea {
  background-color: transparent !important;
  padding: 15px !important;
}


/* line 47, ../quiz/assets/scss/_general.scss */

textarea {
  min-height: 150px;
}


/* line 51, ../quiz/assets/scss/_general.scss */

input {
  color: #fff;
}


/* line 55, ../quiz/assets/scss/_general.scss */

.link {
  color: #000;
  text-decoration: none;
}


/* line 59, ../quiz/assets/scss/_general.scss */

.link:hover {
  color: #000;
}


/* line 1, ../quiz/assets/scss/_color.scss */

* {
  --main-text: #000;
  --text-span: rgba(255, 135, 67, 1);
  --main-promo: #A3B6C1;
  --main-background: #F6F6F6;
  --text-green: #56C167;
  --text-white: #fff;
  --text-green-hover: #2DAF42;
  --btn-shadow-green: 0px 5px 48px -10px rgba(86, 193, 103, 0.6);
}


/* line 3, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item {
  display: none;
}


/* line 6, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item.active {
  display: block;
}


/* line 10, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item .quiz-title {
  padding: 20px 0;
}


/* line 16, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn {
  width: 187px;
  font-size: 17px;
  background-color: var(--text-green);
  color: var(--text-white);
  -webkit-box-shadow: var(--btn-shadow-green);
  -moz-box-shadow: var(--btn-shadow-green);
  box-shadow: var(--btn-shadow-green);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}


/* line 25, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn:hover {
  background-color: var(--text-green-hover);
  color: var(--text-white);
}

@media (max-width: 767px) {
  /* line 16, ../quiz/assets/scss/_quiz.scss */
  section#quiz .quiz-btn {
    font-size: 17px;
  }
}


/*# sourceMappingURL=style.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<section id="quiz" class="quiz my-5">
  <div class="container">
    <div class="quiz-items">
      <div class="progress mb-5">
        <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="quiz-item text-center active">
        <div class="quiz-title">
          <h1>Заявка на расчет стоимости!</h1>
        </div>
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 1" id="checkbox1">
          <label class="form-check-label" for="checkbox1">
                            Тест 1
                        </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">
                            Тест 2
                        </label>
        </div>
      </div>
      <div class="quiz-item">
        <input type="text" class="form-control" placeholder="">
        <input type="text" class="form-control" placeholder="">
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">
                            Тест 2
                        </label>
        </div>
      </div>
    </div>
    <div class="quiz-nav mt-5">
      <div class="d-flex justify-content-between">
        <a href="#!" class="btn quiz-btn prev">Назад</a>
        <a href="#!" class="btn quiz-btn next">Вперед</a>
      </div>
    </div>
  </div>
</section>

jquery
  • 1 1 个回答
  • 16 Views

1 个回答

  • Voted
  1. Best Answer
    Arbery
    2023-09-19T04:48:05Z2023-09-19T04:48:05Z

    简化了代码,调整了工作。首先让jquery自己决定实际的索引。并以此为基础,剔除不必要的条件,计算利息。

    $(document).ready(() => {
      let allIndex = $('.quiz-item').length;
    
      $('.next').click(function() {
        let activeIndex = $('.quiz-item.active').index();
        if (activeIndex === allIndex) return;
        move(true);
        $('.progress-bar').css('width', activeIndex * 100 / (allIndex - 1) + '%')
      });
    
      $('.prev').click(function() {
        let activeIndex = $('.quiz-item.active').index();
        if (activeIndex === 1) return;
        move(false);
        $('.progress-bar').css('width', (activeIndex - 2) * 100 / (allIndex - 1) + '%')
      });
    
      function move(direction) {
        direction
          ?
          $('.active')
          .removeClass('active')
          .next()
          .addClass('active') :
          $('.active')
          .removeClass('active')
          .prev()
          .addClass('active');
      }
    })
    /* line 1, ../quiz/assets/scss/_main.scss */
    
    html,
    body {
      font-family: 'Montserrat';
      text-size-adjust: none;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
    }
    
    
    /* Section */
    
    
    /* line 1, ../quiz/assets/scss/_general.scss */
    
    * {
      margin: 0;
      padding: 0;
    }
    
    
    /* line 6, ../quiz/assets/scss/_general.scss */
    
    body {
      font-family: 'Montserrat';
    }
    
    
    /* line 10, ../quiz/assets/scss/_general.scss */
    
    a.active.focus,
    a.active:focus,
    a.focus,
    a:active.focus,
    a:active:focus,
    a:focus,
    button.active.focus,
    button.active:focus,
    button.focus,
    button:active.focus,
    button:active:focus,
    button:focus,
    .btn.active.focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn:active:focus,
    .btn:focus {
      outline: 0 !important;
      outline-color: transparent !important;
      outline-width: 0 !important;
      outline-style: none !important;
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important;
    }
    
    
    /* line 35, ../quiz/assets/scss/_general.scss */
    
    select:focus,
    input:focus,
    textarea:focus {
      border-color: #272727 !important;
      box-shadow: none !important;
    }
    
    
    /* line 42, ../quiz/assets/scss/_general.scss */
    
    input:not([type="checkbox"]),
    textarea {
      background-color: transparent !important;
      padding: 15px !important;
    }
    
    
    /* line 47, ../quiz/assets/scss/_general.scss */
    
    textarea {
      min-height: 150px;
    }
    
    
    /* line 51, ../quiz/assets/scss/_general.scss */
    
    input {
      color: #fff;
    }
    
    
    /* line 55, ../quiz/assets/scss/_general.scss */
    
    .link {
      color: #000;
      text-decoration: none;
    }
    
    
    /* line 59, ../quiz/assets/scss/_general.scss */
    
    .link:hover {
      color: #000;
    }
    
    
    /* line 1, ../quiz/assets/scss/_color.scss */
    
    * {
      --main-text: #000;
      --text-span: rgba(255, 135, 67, 1);
      --main-promo: #A3B6C1;
      --main-background: #F6F6F6;
      --text-green: #56C167;
      --text-white: #fff;
      --text-green-hover: #2DAF42;
      --btn-shadow-green: 0px 5px 48px -10px rgba(86, 193, 103, 0.6);
    }
    
    
    /* line 3, ../quiz/assets/scss/_quiz.scss */
    
    section#quiz .quiz-items .quiz-item {
      display: none;
    }
    
    
    /* line 6, ../quiz/assets/scss/_quiz.scss */
    
    section#quiz .quiz-items .quiz-item.active {
      display: block;
    }
    
    
    /* line 10, ../quiz/assets/scss/_quiz.scss */
    
    section#quiz .quiz-items .quiz-item .quiz-title {
      padding: 20px 0;
    }
    
    
    /* line 16, ../quiz/assets/scss/_quiz.scss */
    
    section#quiz .quiz-btn {
      width: 187px;
      font-size: 17px;
      background-color: var(--text-green);
      color: var(--text-white);
      -webkit-box-shadow: var(--btn-shadow-green);
      -moz-box-shadow: var(--btn-shadow-green);
      box-shadow: var(--btn-shadow-green);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
    }
    
    
    /* line 25, ../quiz/assets/scss/_quiz.scss */
    
    section#quiz .quiz-btn:hover {
      background-color: var(--text-green-hover);
      color: var(--text-white);
    }
    
    @media (max-width: 767px) {
      /* line 16, ../quiz/assets/scss/_quiz.scss */
      section#quiz .quiz-btn {
        font-size: 17px;
      }
    }
    
    
    /*# sourceMappingURL=style.css.map */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    
    <section id="quiz" class="quiz my-5">
      <div class="container">
        <div class="quiz-items">
          <div class="progress mb-5">
            <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="quiz-item text-center active">
            <div class="quiz-title">
              <h1>Заявка на расчет стоимости!</h1>
            </div>
          </div>
          <div class="quiz-item">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="Тест 1" id="checkbox1">
              <label class="form-check-label" for="checkbox1">Тест 1</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
              <label class="form-check-label" for="checkbox2">Тест 2</label>
            </div>
          </div>
          <div class="quiz-item">
            <input type="text" class="form-control" placeholder="">
            <input type="text" class="form-control" placeholder="">
          </div>
          <div class="quiz-item">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="Тест 3" id="checkbox3">
              <label class="form-check-label" for="checkbox3">Тест 3</label>
            </div>
          </div>
        </div>
        <div class="quiz-nav mt-5">
          <div class="d-flex justify-content-between">
            <a href="#!" class="btn quiz-btn prev">Назад</a>
            <a href="#!" class="btn quiz-btn next">Вперед</a>
          </div>
        </div>
      </div>
    </section>

    • 1

相关问题

  • jquery轨道输入点击

  • 滑块光滑 nextSlider + 1

  • jquery选择器+获取值

  • JQ Masked Input电话号码填写时如何避免输入数字7和8?

  • 如何获取相邻父级 jQuery 的元素?

  • 如何解析收到的json响应

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5