需要帮助show（）hide（）底部序列导航（取决于选择的输入）

Question

您好，我正在根据选择输入显示不同的序列导航。 这是到目前为止我正在尝试做的例子：

                               <ul class="steps" id="dbleOpt">
<li class="active">Create<span class="chevron"></span></li>
                                <li>Fields<span class="chevron"></span></li>
                            </ul>
                        <ul class="steps" id="singleOpt">
  <li class="active">Create<span class="chevron"></span></li>
 <li>Welcome<span class="chevron"></span></li>
                            <li>Overview<span class="chevron"></span></li>
                        </ul>

这是我的javascript不起作用：

 $(function () {
        $('#singleOpt').hide();
        $('#dbleOpt').show();

        $('#Lists_opt_in').on("change",function () {
            $('#dbleOpt').hide();
            $('#singleOpt'+$(this).val()).show();
        })
    });

这是选择输入。

<select id="Lists_opt_in" name="Lists[opt_in]" class="form-control has-help-text">
<option value="double" selected>Double opt-in</option>
<option value="single">Single opt-in</option>
</select>

Answer 1

1. 在代码片段下方的选项标签中使用一些data属性
2. 然后找到受尊重的id的data属性以显示

 $(function() { $('#singleOpt').hide(); $('#dbleOpt').show(); $('#Lists_opt_in').on("change", function() { $('.steps').hide(); $('#'+$('option:selected', this).data('target')).show() }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="steps" id="dbleOpt"> <li class="active">Create<span class="chevron"></span></li> <li>Fields<span class="chevron"></span></li> </ul> <ul class="steps" id="singleOpt"> <li class="active">Create<span class="chevron"></span></li> <li>Welcome<span class="chevron"></span></li> <li>Overview<span class="chevron"></span></li> </ul> <select id="Lists_opt_in" name="Lists[opt_in]" class="form-control has-help-text"> <option value="double" data-target="dbleOpt" selected>Double opt-in</option> <option value="single" data-target="singleOpt" >Single opt-in</option> </select> 

Answer 2

为了简单起见，只需尝试一个列表，然后使用jQuery的toggle()方法来切换可见性：

 $(function () { $('#Lists_opt_in').on("change",function () { $('.dbleOpt').toggle(); $('.singleOpt').toggle(); }) }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="steps" id="dbleOpt"> <li class="active">Create<span class="chevron"></span></li> <li class="dbleOpt">Fields<span class="chevron"></span></li> <li class="singleOpt hidden">Welcome<span class="chevron"></span></li> <li class="singleOpt hidden">Overview<span class="chevron"></span></li> </ul> <select id="Lists_opt_in" name="Lists[opt_in]" class="form-control has-help-text"> <option value="double" selected>Double opt-in</option> <option value="single">Single opt-in</option> </select>