根据先前字段集的输入显示字段集

Question

我对编程还很陌生，所以我希望我的问题不会打扰任何人：

我有一个用 html、css 和 jQuery 编写的多步骤表格，一张一张幻灯片显示。我想要它如下：它不应该只显示下一个字段集，而是一个基于前一个字段集输入的字段集。

这是我的字段集之一：

 <fieldset id="Programming_Language">
    <h2 class="fs-title">Programming Language</h2>
    <h3 class="fs-subtitle">What did you use?</h3>
    <select>
  <option value="a">Java</option>
  <option value="b">JavaScript</option>
</select>
  </br>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>

这是 jQuery 代码，它只显示下一个字段集：

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

期望的行为是，如果用户选择 Java，则显示 id=Java_Framework 的字段集，如果用户选择 [，则显示 id=JavaScript_Framework 的字段集=28=]脚本

非常感谢

Answer 1

您必须根据选择的语言覆盖 next_fs 的值。假设您在当前字段集替换

之后已经存在 2 个字段集

next_fs = $(this).parent().next();

和

//do this only for this fieldset
if(current_fs.attr('id')=='Programming_Language'){ 
   var lang = current_fs.find('select').val(); //get the selected language

   if(lang=='a'){
      next_fs = $(this).parent().next('#Java_Framework');   
   }
   else if(lang=='b'){
      next_fs = $(this).parent().next('#JavaScript_Framework');
   }
   else{
      next_fs = $(this).parent().next();
   }
}
else{
    next_fs = $(this).parent().next();
}

根据先前字段集的输入显示字段集

Show fieldset depending on input of previous fieldset

html

jquery

fieldset