Javascript jQuery隐藏和搜索

我有一系列复杂的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>

---

代码笔上的演示：

我不确定这是否是您想要的，但以下是我最好的尝试：

$'input[type=radio]'。单击函数{ var desc=+$this.attrname+'-'+$this.val；//匹配要为此问题显示的div $desc.toggle；//显示此问题的div $this.closest'.question wrap'.hide .parent.next.show.end.prev.find'.reason desc'.hide }; .问题组：非：第一类{ 显示：无； } .原因总结{ 显示：无； 边缘底部：10px； } .原因h2{ 字体大小：24px； } .原因说明{ 字体大小：16px； } 问题1

对 不 1理由1 描述

1理由1 描述

问题2

对 不 原因2 描述

原因2 描述

问题3

对 不 原因3 描述

原因3 描述

---

.next函数只查看直接同级..下一级是否有效？问题是.question wrap元素嵌套在问题组中，因此它们根本不是同级。你必须像.parent.question-group一样向上，然后找到.next.question-group，然后从那里找到.find.question-wrap。还要注意，$this.attrname+'-'+$this.val可以写成this.name+'-'+this.value。我试图在回答时隐藏当前问题，在回答下一个问题时隐藏当前原因描述。我希望这是有意义的？我修复了演示，以便只隐藏.desc的原因。希望这能有所帮助。不过，当我添加第三组时，这并没有隐藏desc的原因！真奇怪！让我更新演示并看一看。我刚刚在演示中添加了第三个问题，它对我来说仍然很好。你能检查一下我的浏览器是否能在你的浏览器上运行，然后将HTML与你自己的更新进行比较吗？

$('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
});