在多步骤表单上保留显示/隐藏div [英] retain show / hide div on multistep form

问题描述

我有一个多步骤表单，我正在基于无线电输入选择显示/隐藏div.当您单击所需的输入时，下面的代码有效，但是如果我移至下一页然后再次返回，它将记住"已选择的选项，但再次隐藏了两个div.有什么建议?

I have a multistep form and I'm showing / hiding divs based on a radio input selection. The code below works when you click the input you want, but if I move to the next page and then back again, it "remembers" which option was selected but hides both divs again. Any suggestions?

$(document).ready(function() {
  if($('form#enter-details-form').length) {
        $("div[id^='p_option_']").hide('fast');

        $("input[name='p_method']:checked").each(function() {
            $("#p_option_" + $(this).val()).show();
        });

        $("input[name='p_method']").click(function() {
            $("div[id^='p_option_']").hide();
        $("#p_option_" + $(this).val()).show();
        });
  }
});


<div class="form-radios">
    <label><input type="radio" class="form-radio" value="0" name="p_method" id="edit-p-method-0"> Option 1 </label>
    <label><input type="radio" class="form-radio" value="1" name="p_method" id="edit-p-method-1"> Option 2</label>
</div>

<div id="p_option_0">Show this for option 0</div>
<div id="p_option_1">Show this for option 1</div>

推荐答案

奇怪的是，从初始.hide()中删除了duration参数('fast')似乎可以解决此问题.

Strangely enough removing the duration argument ('fast') from the initial .hide() seems to fix the problem.

这是一个有效的示例: http://jsfiddle.net/qb2sk/

Here is a working example: http://jsfiddle.net/qb2sk/

这篇关于在多步骤表单上保留显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！