当if语句正确时显示一个新的元素

I have this questionnaire. Now I want to make some if-statements in HTML/CSS/jQuery to obtain the following:

我有这份问卷。现在我想在HTML / CSS / jQuery中创建一些if语句来获得以下内容：

In the beginning only Question 1 is visible, when the input here will be equal to, say, X Question 2 will become visible, when the input for Question 2 will be, say Y, Question 3 will be visible etc. When the answer for Question 3 is correct to, the text will be displayed.

在开始时只有问题1是可见的，当这里的输入将等于，例如，X问题2将变得可见，当问题2的输入将是，说Y，问题3将是可见的等。当答案为问题3是正确的，将显示文本。

Is it possible to put a if-statement into HTML/CSS/jQuery?

是否可以将if语句放入HTML / CSS / jQuery？

HTML:

HTML：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JFP</title>
  <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
  <link rel="stylesheet" href="/static/main.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="/static/app.js"></script>
</head>

<div class="quest" style="display:">
    <div class="container">
      <div class="row text-center">

        <div class="col-xs-8 col-xs-offset-2">
          <form class="quest" id="form1">

            <p class="vraag1">
              <input name="vraag1" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Question 1" id="vraag1" />
            </p>

            <p class="vraag2">
              <input name="vraag2" type="text" class="validate[required,custom[email]] feedback-input" id="vraag2" placeholder="Question 2" />
            </p>

            <p class="vraag3">
              <input name="vraag3" type="text" class="validate[required,custom[email]] feedback-input" id="vraag3" placeholder="Question 3" />
            </p>

            <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero leo, pellentesque ornare, adipiscing vitae, rhoncus commodo, nulla. Fusce quis ipsum. Nulla neque massa, feugiat sed, commodo in, adipiscing ut, est. In fermentum mattis ligula. Nulla ipsum. Vestibulum condimentum condimentum augue. Nunc purus risus, volutpat sagittis, lobortis at, dignissim sed, sapien. Fusce porttitor iaculis ante. Curabitur eu arcu. Morbi quam purus, tempor eget, ullamcorper feugiat, commodo ullamcorper, neque.</b>

            </div>
          </form>
        </div>

      </div>
    </div>
  </div>

CSS:

CSS：

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

#feedback-page {
  text-align: center;
}

.feedback-input {
  color: #3c3c3c;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: rgb(245, 245, 245);
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0, 0, 0, 0);
}

.feedback-input:focus {
  background: #fff;
  box-shadow: 0;
  border: 3px solid rgb(42, 186, 214);
  color: rgb(51, 51, 51);
  outline: none;
  padding: 13px 13px 13px 54px;
}

.focused {
  color: #30aed6;
  border: #30aed6 solid 3px;
}

#vraag1 {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  margin-top: 50px;
}

#vraag1:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#vraag2 {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#vraag2:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#vraag3 {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat; 
  margin-bottom: 50px;
}

#vraag3:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

.quest a {
  font-size: 18px;
}

4 个解决方案

#1

Working fidddle

工作小提琴

You can do it using keyup event in jquery and you have to hide the inputs by default using css :

您可以使用jquery中的keyup事件来执行此操作，并且您必须使用css默认隐藏输入：

.vraag2, .vraag3{
    display:none;   
}

So you can show them when your conditions are true.

因此，当条件成立时，您可以显示它们。

    $('body').on('keyup','#vraag1',function(){
        if($(this).val()=='X'){
            $('.vraag2').show();
        }
    })

    $('body').on('keyup','#vraag2',function(){
        if($(this).val()=='Y'){
            $('.vraag3').show();
        }
    })

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

#feedback-page {
  text-align: center;
}

.feedback-input {
  color: #3c3c3c;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: rgb(245, 245, 245);
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0, 0, 0, 0);
}

.feedback-input:focus {
  background: #fff;
  box-shadow: 0;
  border: 3px solid rgb(42, 186, 214);
  color: rgb(51, 51, 51);
  outline: none;
  padding: 13px 13px 13px 54px;
}

.focused {
  color: #30aed6;
  border: #30aed6 solid 3px;
}

#vraag1 {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  margin-top: 50px;
}

#vraag1:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#vraag2 {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#vraag2:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#vraag3 {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat; 
  margin-bottom: 50px;
}

#vraag3:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

.quest a {
  font-size: 18px;
}

.vraag2, .vraag3{
    display:none;   
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quest" style="display:">
    <div class="container">
      <div class="row text-center">

        <div class="col-xs-8 col-xs-offset-2">
          <form class="quest" id="form1">

            <p class="vraag1">
              <input name="vraag1" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Question 1" id="vraag1" />
            </p>

            <p class="vraag2">
              <input name="vraag2" type="text" class="validate[required,custom[email]] feedback-input" id="vraag2" placeholder="Question 2" />
            </p>

            <p class="vraag3">
              <input name="vraag3" type="text" class="validate[required,custom[email]] feedback-input" id="vraag3" placeholder="Question 3" />
            </p>

            <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero leo, pellentesque ornare, adipiscing vitae, rhoncus commodo, nulla. Fusce quis ipsum. Nulla neque massa, feugiat sed, commodo in, adipiscing ut, est. In fermentum mattis ligula. Nulla ipsum. Vestibulum condimentum condimentum augue. Nunc purus risus, volutpat sagittis, lobortis at, dignissim sed, sapien. Fusce porttitor iaculis ante. Curabitur eu arcu. Morbi quam purus, tempor eget, ullamcorper feugiat, commodo ullamcorper, neque.</b>

            </div>
          </form>
        </div>

      </div>
    </div>
  </div>

Hope this helps.

希望这可以帮助。

#2

I would recommend using knockout js to handle this. The sequential progression of event-based appearance makes it an ideal case. You can consult this website for more information: http://knockoutjs.com/

我建议使用knockout js来处理这个问题。基于事件的外观的连续进展使其成为理想的案例。有关更多信息，请访问此网站：http：//knockoutjs.com/

#3

You can use conditional statements in jQuery (basically as in JavaScript)

你可以在jQuery中使用条件语句（基本上和JavaScript一样）

if($('input[name=vraag1]').val() == 'X')
{
//if textbox 1 input has a certain value
//procees to show the second text box
}

#4

Create css classes like hide,show and then add them to the p elements using jquery.

创建隐藏，显示等css类，然后使用jquery将它们添加到p元素。

    .vraag2, .vraag3{
    display: none;
}
    .show{
    display: block;
}

if($('input[name=vraag1]').val() == 'X'){
$('.varagg2').addClass('show');    
}

#1