Question

根据用户如何回答问题，我需要隐藏和显示一些复杂的div系列。

基本上，用户会收到一个问题。当他们回答问题时，他们会根据他们的回答方式呈现内容，包括标题和描述。然后隐藏当前的问题，然后应该向他们提出下一个问题。当他们回答下一个问题时，应隐藏前面的描述，并显示下一个标题和描述。这一直持续到所有问题都得到解答。

我的HTML看起来像这样：

<div class="container">
<form>
    <div id="q-1" class="question-group row">
        <div class="question-wrap">
            <p>question 1?</p>
            <label class="radio-inline">
                <input type="radio" name="q1" value="yes"> Yes
            </label>
            <label class="radio-inline">
                <input type="radio" name="q1" value="no"> No
            </label>
        </div>
        <div id="q1-yes" class="reason-wrap">
            <div class="reason">
                <h2><span class="number">1</span>reason 1</h2> 
            </div>
            <div class="reason-desc">
                <p>description</p>                    
            </div>
        </div>
        <div id="q1-no" class="reason-wrap">
            <div class="reason">
                <h2><span class="number">1</span>reason 1</h2> 
            </div>
            <div class="reason-desc">
                <p>description</p>                    
            </div>
        </div>
    </div>
    <div id="q-2" class="question-group row">
        <div class="question-wrap">
            <p>question 2?</p>
            <label class="radio-inline">
                <input type="radio" name="q2" value="yes"> Yes
            </label>
            <label class="radio-inline">
                <input type="radio" name="q2" value="no"> No
            </label>
        </div>
        <div id="q2-yes" class="reason-wrap">
            <div class="reason">
                <h2><span class="number">2</span>reason 2</h2> 
            </div>
            <div class="reason-desc">
                <p>description</p>                    
            </div>
        </div>
        <div id="q2-yes" class="reason-wrap">
            <div class="reason">
                <h2><span class="number">2</span>reason 2</h2> 
            </div>
            <div class="reason-desc">
                <p>description</p>                    
            </div>
        </div>
    </div>
</form>
</div>

我的js / jquery看起来像这样:(我已经评论过我似乎无法正常工作。）

$('input[type="radio"]').click(function() {
    var desc = ('#'+$(this).attr("name")+'-'+$(this).val()); //matching div to display for this question 
    $(desc).toggle(); //show div for this question
    $(this).closest('.question-wrap').hide(); //hide this question
    $(this).parent().next('.question-wrap').show(); //show next question NOT WORKING
    //??? hide only the .reason-desc that is currently showing when next question is answered
});

并在codepen上演示：http://codepen.io/anon/pen/XMJZLK

Answer 1

我不确定这是否是您正在寻找的，但这是我最好的尝试：

＆＃13;

$('input[type="radio"]').click(function() {
  var desc = ('#' + $(this).attr("name") + '-' + $(this).val()); //matching div to display for this question 
  $(desc).toggle(); //show div for this question
  $(this).closest('.question-wrap').hide()
    .parent().next().show().end().prev().find('.reason-desc').hide()
});

＆＃13;

.question-group:not(:first-of-type) {
  display: none;
}

.reason-wrap {
  display: none;
  margin-bottom: 10px;
}

.reason h2 {
  font-size: 24px;
}

.reason-desc p {
  font-size: 16px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form>
    <div id="q-1" class="question-group row">
      <div class="question-wrap">
        <p>question 1?</p>
        <label class="radio-inline">
                <input type="radio" name="q1" value="yes"> Yes
            </label>
        <label class="radio-inline">
                <input type="radio" name="q1" value="no"> No
            </label>
      </div>
      <div id="q1-yes" class="reason-wrap">
        <div class="reason">
          <h2><span class="number">1</span>reason 1</h2>
        </div>
        <div class="reason-desc">
          <p>description</p>
        </div>
      </div>
      <div id="q1-no" class="reason-wrap">
        <div class="reason">
          <h2><span class="number">1</span>reason 1</h2>
        </div>
        <div class="reason-desc">
          <p>description</p>
        </div>
      </div>
    </div>
    <div id="q-2" class="question-group row">
      <div class="question-wrap">
        <p>question 2?</p>
        <label class="radio-inline">
                <input type="radio" name="q2" value="yes"> Yes
            </label>
        <label class="radio-inline">
                <input type="radio" name="q2" value="no"> No
            </label>
      </div>
      <div id="q2-yes" class="reason-wrap">
        <div class="reason">
          <h2><span class="number">2</span>reason 2</h2>
        </div>
        <div class="reason-desc">
          <p>description</p>
        </div>
      </div>
      <div id="q2-no" class="reason-wrap">
        <div class="reason">
          <h2><span class="number">2</span>reason 2</h2>
        </div>
        <div class="reason-desc">
          <p>description</p>
        </div>
      </div>
    </div>
    
    <div id="q-3" class="question-group row">
      <div class="question-wrap">
        <p>question 3?</p>
        <label class="radio-inline">
                <input type="radio" name="q3" value="yes"> Yes
            </label>
        <label class="radio-inline">
                <input type="radio" name="q3" value="no"> No
            </label>
      </div>
      <div id="q3-yes" class="reason-wrap">
        <div class="reason">
          <h2><span class="number">3</span>reason 3</h2>
        </div>
        <div class="reason-desc">
          <p>description</p>
        </div>
      </div>
      <div id="q3-no" class="reason-wrap">
        <div class="reason">
          <h2><span class="number">3</span>reason 3</h2>
        </div>
        <div class="reason-desc">
          <p>description</p>
        </div>
      </div>
    </div>
  </form>
  </div>

＆＃13;

另请注意，您可能需要<div id="q2-no">而不是<div id="q2-yes">的两个版本。

jQuery Hide and Go Seek

1 个答案: