Question

我有一个正在创建的表格，我将有一些部分从右到左出现，在那上面，并固定了一个条形，每次单击时，宽度应增加。转到下一个问题。这样用户将知道他的进度。我无法将我的进度栏设为工作，您能帮我找出原因吗？

HTML

<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
</div> 

<div class="questionsContainer">

<div class="section one">
    <p class="sectionTitle">This is the First Question?</p>
    <div class="buttonContinue" id="section2">CONTINUE</div>
</div>

<div class="section two">
    <p class="sectionTitle">Aja! time for the Second one!!</p>
    <div class="buttonContinue" id="section3">CONTINUE</div>
</div>

<div class="section three">
    <p class="sectionTitle">Another Question? 3 so far?</p>
    <div class="buttonContinue" id="section4">CONTINUE</div>
</div>

</div>

CSS

body {
        margin: 0 auto;
        transition: all 0.2s ease;
    }

    .progress-container {
        width: 100%;
        height: 4px;
        background: transparent!important;
        position: fixed;
        top: 0;
        z-index: 99;
    }

    .progress-bar {
        height: 4px;
        background: #4ce4ff;
        width: 10%;
    }

    header {
        width: 100%;
        height: 150px;
        position: relative;
        background-color: fuchsia;
    }

    .questionsContainer {
        width: 100%;
        height: calc(100% - 200px);
        position: absolute;
        background-color: lime;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    footer {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        background-color: black;
    }

    .section {
        background-color: purple;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .one {
        position: absolute;
        right: auto;
        transition: all 0.2s ease;
    }

    .two {
        position: absolute;
        right: -100%;
        transition: all 0.2s ease;
    }

    .three {
        position: absolute;
        right: -100%;
        transition: all 0.2s ease;
    }

    .sectionTitle {
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-size: 30px;
        margin: 0 auto;
    }

    .buttonContinue {
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-size: 16px;
        padding: 10px 20px;
        background-color: red;
        border-radius: 5px;
        margin: 20px 0px;
        text-align: center;
        cursor: pointer;
        width: 100px;
    }

JAVASCRIPT

<script type="text/javascript">
document.getElementById('section2').onclick = function(){
$('.one').css('right','100%');
$('.two').css('right','auto');
}   

document.getElementById('section3').onclick = function(){
$('.two').css('right','100%');
$('.three').css('right','auto');
}
</script>

<script type="text/javascript">

$(document).ready(function(){
$("#section2").click(addVisit);
$("#section3").click(addVisit);
$("#section4").click(addVisit);
});

function addVisit(){
     var progressTag = $('#myBar');
     count ++;
     progressTag.css('width', count * 10 + "%");
});

</script>

Answer 1

您的主要问题是尚未创建count变量，并且最初没有为其赋值。

我已经对您的代码进行了一些优化，这就是我的方法：

var count = 1;
$(document).ready(function() {
  $("#section2, #section3, #section4").click(function() {
    $('#myBar').css('width', ++count * 10 + "%");
  });
});

我还添加了transition: all 1s;用于CSS过渡动画。

Here is your updated code in JSFiddle

单击按钮时的进度栏

1 个答案: