Question

我正在尝试实现以下代码。 codepen.io 但是我想要的区别是，每当用户单击红色时，它将跳过下一步并跳至另一步。例如，如果在步骤1中单击红色，则它将跳过步骤2并继续执行步骤3。在javascript代码中，我添加了条件，如果red的值大于1，则

next_fs.hide();
next_fs.show();

据我所知甚少，它应该起作用。在这一点上，我不知道该怎么办。

Answer 1

我会向输入中添加数据属性，例如data-skip="2"。基本上说“如果选择此选项，则跳过2”。然后，您无需检查$(this).parent().next()，而是选择当前步骤中的选定值，然后使用$(this).parent().nextAll().slice(0, skipSteps).last()选择下一个视图。

例如，您将拥有以下内容：

current_fs = $(this).parent();
next_step = current_fs.find('input:checked').attr('data-skip') || 1;
next_fs = $(this).parent().nextAll().slice(0, parseInt(next_step, 10)).last();

检查我的叉子：https://codepen.io/tbleckert/pen/aRLLwE?editors=1010

Answer 2

请尝试以下代码。

 if($(this).parent().find('.control-checkbox input:checked').val() == "red"){
        next_fs = $(this).parent().next().next();
    }else{
      next_fs = $(this).parent().next();
  }

在下一步功能中添加以上代码。

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

    current_fs = $(this).parent();
  //console.log($(this).parent().find('.control-checkbox input:checked').val());
  if($(this).parent().find('.control-checkbox input:checked').val() == "red"){
        next_fs = $(this).parent().next().next();
    }else{
      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'
    });
});

上一次点击。请更新以下代码。

 if($(this).parent().prev().prev().find('.control-checkbox input:checked').val() == "red"){
        previous_fs = $(this).parent().prev().prev();
    }else{
      previous_fs = $(this).parent().prev();
  }

在先前的点击功能中添加以上代码。

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

    current_fs = $(this).parent();

  //console.log($(this).parent().prev().prev().find('.control-checkbox input:checked').val());
  if($(this).parent().prev().prev().find('.control-checkbox input:checked').val() == "red"){
        previous_fs = $(this).parent().prev().prev();
    }else{
      previous_fs = $(this).parent().prev();
  }

    // de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    // show the previous fieldset
    previous_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 previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            // 2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            // 3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        // this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

jQuery根据RADIO BUTTON

2 个答案: