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

Question

我有简单的多格式选项卡。它工作正常，当我单击每个字段集中的下一个按钮时，它将导航到下一个字段集。它工作得很好，但我在第一个字段集中创建了一个新按钮“提交答案”，它将调用 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'
            });
        }
      

标签： javascripthtmljqueryangularjs

Answer 1

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

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

演示代码（在下面的代码而不是 angularjs 中，我只使用了单击事件并从那里调用了 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>