javascript - 在 for 循环按钮中添加类单击

Question

(function ($) {
$.fn.fCycle = function () {
        var x;
        for (x in arguments) {
            $(arguments[x]).close();
        }
        $(this).collapse("show");
    };

$(".btn-next").on('click', function() {
        var form = [$("#name"), $("#surname"), $("#student_number"), $("#cellphone"), $("#email"), $("#course"), $("#year")],
            i = 0,
            a = "#" + $(this).attr("data-to"),
            b = "#" + $(this).attr("data-from");
        if ($(this).hasClass("to_course")) {
            for (i; i < 5; i++) {
                console.log(form[i].val());
                if (form[i].val() === undefined) {
                    form[i].addClass("has-danger")
                    $(a).fCycle(b);
                } else if (form[i].hasClass("has-danger") && form[i].length > 0) {
                    form[i].removeClass("has-danger")
                }
            }
            $(a).fCycle(b);
        }
    });
  }(jquery));
$(".btn-next").on('click', function () {
	var form = [$("#name")],
    	i = 0,
        a = "#" + $(this).attr("data-to"),
        b = "#" + $(this).attr("data-from");
    if ($(this).hasClass("to_course")) {
        for (i; i < form.length; i++) {
            if (form[i].val() === undefined) {
                form[i].addClass("has-danger")
                $(a).fCycle(b);
            } 
			else if (form[i].hasClass("has-danger") && form[i].length > 0) {
                form[i].removeClass("has-danger");
            }
        }
        $(a).fCycle(b);
    }
});
			

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" id="apply">
        <div id="personal" class="collapse in">
            <fieldset class="col-xs-10 col-xs-offset-1 form-group">
                <div class="row">
                    <label for="names">Name(s)</label> 
                    <input class="form-control" type="text" name="names" id="names" placeholder="Enter your full name here">
                </div>
                <hr>
                <div class="row">
                    <nav>
                        <ul class="pager">
                            <li>
                                <button class="btn btn-danger btn-cancel" type="button">cancel</button>
                            </li>
                            <li class="pager-next">
                                <button class="btn btn-next btn-success to_course" type="button" data-to="course" data-from="personal">next</button>
                            </li>
                        </ul>
                    </nav>
                </div>
            </fieldset>
        </div>
        <div id="course" class="collapse">
            <p>course</p>
        </div>
    </form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

上面的代码片段似乎根本不起作用 - 对于原始代码(http://alpha.msauwc.co.za -> 如果您单击 Join the MSA 按钮， 您会发现该表单确实有效。问题是当输入字段未填写时，next 按钮不应该工作。

必须使用 jquery 来防止这种情况。

Answer 1

尝试只用选择器字符串定义你的数组，然后像这样包装你的 form[i] 对象:

$(form[i]).val(), $(form[i]).addClass('has-danger')等