提交答案按钮不会进入下一步（字段集），但下一步按钮单击会

Posted 2023-05-09

【中文标题】提交答案按钮不会进入下一步（字段集），但下一步按钮单击会

【英文标题】：Submit Answer button not going to next step (fieldset), but next button click does

【发布时间】：2021-02-17 12:48:54

【问题描述】：

我有简单的多格式标签。它工作正常，当我单击每个字段集中的下一个按钮时，它将导航到下一个字段集。它工作得很好，但我在第一个字段集中创建了一个新按钮“提交答案”，它将调用 Angularjs 函数，并且在成功块内完成提交答案后，我试图使用导航到下一个字段集的下一个按钮的相同逻辑。这在提交答案的成功块内不起作用。有什么我想念的吗？第一个字段集中的下一个按钮外部效果很好。

<!-- fieldsets -->
        <fieldset>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group text-center">
                        <strong>Test</strong>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group text-center">
                        <input type="text" class="form-control" id="txt-Answer" name="txt-Answer" maxlength="100" ng-model="testAnswer" style="width:120%;" />
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-12 text-center">
                        <input type="button" name="btnSubmitAnswer" class="next action-button" value="Submit Answer" ng-click="submitAnswer(userInfo.UserSecurityQuestion[0].SecurityQuestionId);" />
                    </div>
                </div>
            </div>
            <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
            <h2 class="fs-title">Test</h2>
            <h3 class="fs-subtitle">Test</h3>
            @*<input type="text" name="twitter" placeholder="Twitter" />
        <input type="text" name="facebook" placeholder="Facebook" />
        <input type="text" name="gplus" placeholder="Google Plus" />*@
            @*<input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="button" name="next" class="next action-button" value="Next" />*@
            <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </fieldset>
        @*<fieldset>
            <h2 class="fs-title">Test</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </fieldset>*@

下一个按钮点击 - 这是工作

$(".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'
            );
        );

提交答案按钮单击 - 这不起作用（不会进入第 2 步（字段集）

$scope.submitAnswer = function ()
        
                $http(
                    method: 'POST',
                    url: window.location.protocol + '//' + window.location.host + '/Home/SubmitAnswer'
                ).then(
                    function (response) 
                        //Response Message
                        if (response.data.isMatchedResult)
                        
                            nextFieldSet();
                            
                        
                    
                );
            
        
        
        function nextFieldSet()
        
            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'
            );
        
      

【问题讨论】：

你能把它当作一个工作的 sn-p 吗？

跟Parent.Next()有关系吗

【参考方案1】：

您在函数nextFieldSet 中使用了this，它不引用任何元素。这就是为什么在你的函数中没有任何作用。相反，您可以使用progressbar 来获取li 的索引，该索引具有active 类，因为单击.next 按钮，您正在向其添加活动类。

然后，使用 index 获取位于该位置的 fieldset 使用 $("fieldset:eq(" + next_fs + ")") 这将为您提供需要隐藏的字段集的引用。您可以对其他 fieldset 执行相同操作接下来需要展示。

演示代码（在下面的代码中，我只使用了 click 事件并从那里调用了 nextFieldSet）：

$("fieldset:first").fadeIn(); //show first fieldset
var animating;
$(".next").click(function() 
  if (animating) return false;
  animating = true;
  current_fs = $(this).parent();
  next_fs = $(this).parent().next();
  //remove current active
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active")
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  next_fs.show();
  //hide the current fieldset with style
  current_fs.animate(
    opacity: 0
  , 
    step: function(now, mx) 
      scale = 1 - (1 - now) * 0.2;
      left = (now * 50) + "%";
      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'
  );
);
//suppose submit button is click 
$(".action-button").click(function() 
  //call function
  nextFieldSet()
)

function nextFieldSet() 
  if (animating) return false;
  animating = true;
  //get active li index
  current_fs = $("#progressbar li.active").index();
  //for next div add 1
  next_fs = $("#progressbar li.active").index() + 1;
  $("#progressbar li").eq(current_fs).removeClass("active") //remove current active
  //activate next step on progressbar using the index of next_fs
  $("#progressbar li").eq(next_fs).addClass("active");
  var next_divs = $("fieldset:eq(" + next_fs + ")") //find the fieldset eq 
  var current_div = $("fieldset:eq(" + current_fs + ")")
  //show the next fieldset
  next_divs.show();
  //hide the current fieldset with style
  current_div.animate(
    opacity: 0
  , 
    step: function(now, mx) 
      scale = 1 - (1 - now) * 0.2;
      left = (now * 50) + "%";
      opacity = 1 - now;
      current_div.css(
        'transform': 'scale(' + scale + ')',
        'position': 'absolute'
      );
      next_divs.css(
        'left': left,
        'opacity': opacity
      );
    ,
    duration: 800,
    complete: function() 
      current_div.hide();
      animating = false;
    ,
    easing: 'easeInOutBack'
  );

fieldset 
  display: none;


.active 
  color: red;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js?ver=5.3.2'></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<ul id="progressbar">
  <li class="active"><strong>1</strong></li>
  <li><strong>2</strong></li>
  <li><strong>3</strong></li>

</ul>
<div class="fields">
  <fieldset>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group text-center">
          <strong>Test</strong>
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group text-center">
          <input type="text" class="form-control" id="txt-Answer" name="txt-Answer" maxlength="100" ng-model="testAnswer" style="width:120%;" />
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-md-12 text-center">
          <input type="button" name="btnSubmitAnswer" class=" action-button" value="Submit Answer" ng-click="submitAnswer(userInfo.UserSecurityQuestion[0].SecurityQuestionId);" />
        </div>
      </div>
    </div>
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Test</h2>
    <h3 class="fs-subtitle">Test</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Test</h2>
    <h3 class="fs-subtitle">We will never sell it</h3>
    <input type="text" name="fname" placeholder="First Name" />
    <input type="text" name="lname" placeholder="Last Name" />
    <input type="text" name="phone" placeholder="Phone" />
    <textarea name="address" placeholder="Address"></textarea>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
</div>