javascript - CSS 显示属性未通过 JS 做出相应响应

Question

我正在进行一个元素，我正在为网站上的用户进行调查。用户可以点击“后退”按钮转到上一个问题，也可以点击“下一步”按钮转到下一个问题。

所有这些问题都在同一个父 div 中，分隔到它们自己的 div 中。我在父 div 中给每个问题 div 一个隐藏和显示的属性，以便根据用户单击下一步和返回来显示相关问题。因此，如果用户单击下一步，我将隐藏当前问题 div 并显示下一个问题 div。反之亦然，当用户单击后退按钮时。

$(document).ready(function() {

  var foodChoice = document.getElementsByName("food");
  var backBtn = document.getElementById("backBtn");
  var nextBtn = document.getElementById("nextBtn");
  var questions = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
  currentQuestion = 0;


  //scrolling to next question

  $(nextBtn).click(function() {
    currentQuestion++;

    if (currentQuestion == questions.length - 1) {
      nextBtn.style.display = "none";
      backBtn.style.display = "none";
    }

    if (currentQuestion >= 1) {
      backBtn.style.visibility = "visible";
    }

    if (currentQuestion < questions.length) {
      document.getElementById(questions[currentQuestion]).style.display = "block";
      document.getElementById(questions[currentQuestion - 1]).style.display = "none";
    }

  });


  // scrolling to previous question

  $(backBtn).click(function() {
    currentQuestion--;
    if (currentQuestion > 0) {
      document.getElementById(questions[currentQuestion]).style.display = "none";
      document.getElementById(questions[currentQuestion - 1]).style.display = "block";
    }

    if (currentQuestion === 0) {
      backBtn.style.visibility = "hidden";
    }


  });

})

.question {
  display: none;
}

#eight textarea {
  width: 100%;
  min-height: 20vh;
}

#one {
  display: block;
}

#backBtn {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-box">

  <div class="progress-bar">

    <h3 id="percent">7%</h3>

  </div>

  <div id="one" class="question">
    <p>On a scale of 0-5, where 0 is not at all likely and 5 is extremely likely:</p>
    <p>How likely are you to recommend Classic Screenings Cinema to someone else?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="two" class="question">
    <p>On a scale of 0-5, where 0 is not enjoyed it at all and 5 is enjoyed it a lot:</p>
    <p>How much did you enjoy the film/event you watched?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="three" class="question">
    <p>On a scale of 0-5, where 0 is very unhelpful and 5 is very helpful:</p>
    <p>Overall, how helpful were the Classic Screenings staff?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="four" class="question">
    <p>Did you purchase any food / snacks from the cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="food" value="yes"> No
      <input class="yorn" type="radio" name="food" value="no">
    </div>
    <div id="food-followUp" class="question">
      <p>On a scale of 0-5, where 0 is very poor and 5 is excellent:</p>
      <p>What do you rate the quality of the food / snacks?</p>
      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>
      </div>
    </div>
  </div>

  <div id="five" class="question">
    <p>Did you visit the toilet facilities during your visit to Clasic Screenins Cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>
    <div id="facilities-followUp" class="question">
      <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
      <p>Cleanliness of the toilet facilities</p>

      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>

      </div>
    </div>


  </div>

  <div id="six" class="question">
    <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
    <p>The amount of time it took to purchase your ticket, factoring in any time with queuing?</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="seven" class="question">
    <p>With regards to entering the cinema screen and taking your allocated seat, please let us know how strong you agree with the following statements, with 0 representing strongly disagree and 5 representing strongly agree.</p>
    <p>My allocated seat was in great condition</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>

    <p>The area around my seat was clean and tidy</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate2" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate2" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate2" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate2" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate2" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate2" value="5"></li>
      </ul>

    </div>

  </div>

  <div id="eight" class="question">
    <p>Were there any disruptions that occured during the viewing of you movie / event?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>

    <p class="disrupted">Please tell us more about the disruption and what staff did to handle this</p>
    <textarea></textarea>

  </div>

  <div id="nine" class="question">

    <h2>THANK YOU FOR COMPLETING OUR SURVEY!</h2>

    <p>We are very grateful towards you taking the time out to complete this survery.</p>

    <p>Every couple of months our team reflect on these surverys and we develop straregies on the best ways to deal with areas in which can do with improving, as well as ideas on how to further strengthen the positives.</p>

    <p>Once again, we thank you for filling in the survey and we hope to see you soon!</p>

  </div>


</div>

<div class="navigate">

	<div id="backBtn" class="back questionchoice">

		<h2>BACK</h2>

	</div>

	<div id="nextBtn" class="next questionchoice">

		<h2>NEXT</h2>

	</div>

</div>

问题:我发现当我一直点击下一步按钮直到调查结束时，它工作正常。然而，我第一次点击下一步按钮时，应该隐藏的问题却没有出现，而是出现在上一个问题中，它确实出现了。从那时起，原本应该隐藏的同一个问题保留在那里，后退按钮成功地向后循环，遍历每个问题。

Answer 1

您的问题来自“返回”按钮。这是因为您在隐藏问题之前递减了计数器。所以如果你在问题 X 上反击，你会减少你的计数器，然后隐藏 counter 和 counter-1 这真的是X-1 和 X-2

将您的后退按钮功能更改为此 - 或者只是将您的 currentQuestion 索引调用调整为 [currentQuestion+1] 和 [currentQuestion] 为获取正确的索引值。

  $(backBtn).click(function() {
    if (currentQuestion > 0) {
      document.getElementById(questions[currentQuestion]).style.display = "none";
      document.getElementById(questions[currentQuestion - 1]).style.display = "block";
    }

    currentQuestion--;

    if (currentQuestion === 0) {
      backBtn.style.visibility = "hidden";
    }
  });

$(document).ready(function() {

  var foodChoice = document.getElementsByName("food");
  var backBtn = document.getElementById("backBtn");
  var nextBtn = document.getElementById("nextBtn");
  var questions = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
  currentQuestion = 0;


  //scrolling to next question

  $(nextBtn).click(function() {
    currentQuestion++;

    if (currentQuestion == questions.length - 1) {
      nextBtn.style.display = "none";
      backBtn.style.display = "none";
    }

    if (currentQuestion >= 1) {
      backBtn.style.visibility = "visible";
    }

    if (currentQuestion < questions.length) {
      document.getElementById(questions[currentQuestion]).style.display = "block";
      document.getElementById(questions[currentQuestion - 1]).style.display = "none";
    }

  });


  // scrolling to previous question

  $(backBtn).click(function() {
    if (currentQuestion > 0) {
      document.getElementById(questions[currentQuestion]).style.display = "none";
      document.getElementById(questions[currentQuestion - 1]).style.display = "block";
    }
    currentQuestion--;

    if (currentQuestion === 0) {
      backBtn.style.visibility = "hidden";
    }


  });

})

.question {
  display: none;
}

#eight textarea {
  width: 100%;
  min-height: 20vh;
}

#one {
  display: block;
}

#backBtn {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-box">

  <div class="progress-bar">

    <h3 id="percent">7%</h3>

  </div>

  <div id="one" class="question">
    <p>On a scale of 0-5, where 0 is not at all likely and 5 is extremely likely:</p>
    <p>How likely are you to recommend Classic Screenings Cinema to someone else?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="two" class="question">
    <p>On a scale of 0-5, where 0 is not enjoyed it at all and 5 is enjoyed it a lot:</p>
    <p>How much did you enjoy the film/event you watched?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="three" class="question">
    <p>On a scale of 0-5, where 0 is very unhelpful and 5 is very helpful:</p>
    <p>Overall, how helpful were the Classic Screenings staff?</p>
    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="four" class="question">
    <p>Did you purchase any food / snacks from the cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="food" value="yes"> No
      <input class="yorn" type="radio" name="food" value="no">
    </div>
    <div id="food-followUp" class="question">
      <p>On a scale of 0-5, where 0 is very poor and 5 is excellent:</p>
      <p>What do you rate the quality of the food / snacks?</p>
      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>
      </div>
    </div>
  </div>

  <div id="five" class="question">
    <p>Did you visit the toilet facilities during your visit to Clasic Screenins Cinema?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>
    <div id="facilities-followUp" class="question">
      <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
      <p>Cleanliness of the toilet facilities</p>

      <div class="answer">

        <ul>
          <li>0</li>
          <li><input type="radio" name="rate" value="0"></li>
        </ul>

        <ul>
          <li>1</li>
          <li><input type="radio" name="rate" value="1"></li>
        </ul>

        <ul>
          <li>2</li>
          <li><input type="radio" name="rate" value="2"></li>
        </ul>

        <ul>
          <li>3</li>
          <li><input type="radio" name="rate" value="3"></li>
        </ul>

        <ul>
          <li>4</li>
          <li><input type="radio" name="rate" value="4"></li>
        </ul>

        <ul>
          <li>5</li>
          <li><input type="radio" name="rate" value="5"></li>
        </ul>

      </div>
    </div>


  </div>

  <div id="six" class="question">
    <p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
    <p>The amount of time it took to purchase your ticket, factoring in any time with queuing?</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>
  </div>

  <div id="seven" class="question">
    <p>With regards to entering the cinema screen and taking your allocated seat, please let us know how strong you agree with the following statements, with 0 representing strongly disagree and 5 representing strongly agree.</p>
    <p>My allocated seat was in great condition</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate" value="5"></li>
      </ul>

    </div>

    <p>The area around my seat was clean and tidy</p>

    <div class="answer">

      <ul>
        <li>0</li>
        <li><input type="radio" name="rate2" value="0"></li>
      </ul>

      <ul>
        <li>1</li>
        <li><input type="radio" name="rate2" value="1"></li>
      </ul>

      <ul>
        <li>2</li>
        <li><input type="radio" name="rate2" value="2"></li>
      </ul>

      <ul>
        <li>3</li>
        <li><input type="radio" name="rate2" value="3"></li>
      </ul>

      <ul>
        <li>4</li>
        <li><input type="radio" name="rate2" value="4"></li>
      </ul>

      <ul>
        <li>5</li>
        <li><input type="radio" name="rate2" value="5"></li>
      </ul>

    </div>

  </div>

  <div id="eight" class="question">
    <p>Were there any disruptions that occured during the viewing of you movie / event?</p>
    <div class="yesOrNo">
      Yes<input class="yorn" type="radio" name="yorn" value="yes"> No
      <input class="yorn" type="radio" name="yorn" value="no">
    </div>

    <p class="disrupted">Please tell us more about the disruption and what staff did to handle this</p>
    <textarea></textarea>

  </div>

  <div id="nine" class="question">

    <h2>THANK YOU FOR COMPLETING OUR SURVEY!</h2>

    <p>We are very grateful towards you taking the time out to complete this survery.</p>

    <p>Every couple of months our team reflect on these surverys and we develop straregies on the best ways to deal with areas in which can do with improving, as well as ideas on how to further strengthen the positives.</p>

    <p>Once again, we thank you for filling in the survey and we hope to see you soon!</p>

  </div>


</div>

<div class="navigate">

	<div id="backBtn" class="back questionchoice">

		<h2>BACK</h2>

	</div>

	<div id="nextBtn" class="next questionchoice">

		<h2>NEXT</h2>

	</div>

</div>