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的字段集；如果该人选择JavaScript，则显示id = JavaScript_Framework的字段集。

非常感谢

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

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

1 个答案: