Question

我得到了以下代码：

$(document).ready(function(){
    $(".nextForm").on('click',(function(){
        //check criteria
        if(selectedSlots.length < 1 ||$("#positionAppliedFor").get(0).value.length < 1 ||$("#maxAmountOfHours").get(0).value.length < 1){
            //error messages and array          
            var errorForSlots= "<h5>Select at least one availability slot</h5>";
            var errorForPosition = "<h5>Enter the position you wish to apply for<h5>";
            var errorForHours = "<h5>Enter the amount of hours you would like to work<h5>";
            var errors = [];

            //add errors to array
            if(selectedSlots.length < 1){errors.push(errorForSlots)};
            if($("#positionAppliedFor").get(0).value.length < 1){errors.push(errorForPosition)};
            if($("#maxAmountOfHours").get(0).value.length < 1){errors.push(errorForHours)};

            //create message
            var div = "<div id=\"sectionError\">";
            if($("#sectionError").length > 0){$("#sectionError").html('')};
            $(div).appendTo($(this).get(0).parentNode);     
            for(var i = 0; i < errors.length; i++){
            $(errors[i]).appendTo($("#sectionError"));
            console.log(errors[i]);}
            $("</div>").appendTo($(this).get(0).parentNode);    
        } else {
        $("#applicationDetails").slideUp();
        $("#personalDetails").slideDown();
        if($("#sectionError").length > 0){$("#sectionError").remove()};
        }
        console.log("function finished");
    }));

一切正常，但是， 我试图弄清楚如何为

创建函数

//create message
            var div = "<div id=\"sectionError\">";
            if($("#sectionError").length > 0){$("#sectionError").html('')};
            $(div).appendTo($(this).get(0).parentNode);     
            for(var i = 0; i < errors.length; i++){
            $(errors[i]).appendTo($("#sectionError"));
            console.log(errors[i]);}
            $("</div>").appendTo($(this).get(0).parentNode);

我计划在表单上的其他部分重复使用此功能，而不是复制/粘贴，我希望在使代码更整洁方面获得一些帮助。

我确实尝试过：

function myFunction(){
//message code here
}
$(document).ready(function(){
    $(".nextForm").on('click',(function(){
//check criteria
...
//add errors
...
//call func
myFunction();
(I also tried this.myFunction();)
...
}));
});

但是，结果以TypeError结尾，我不知道从哪里开始... 我还担心我的消息代码中的“ this”，因此我也不确定如何在我的新函数中解决这个问题……

诚然，我是新手，我并不十分了解所有来龙去脉，希望您能为您提供帮助。

也许有更好的方法可以做到这一点？无论如何，请让我知道您的想法！谢谢。

Answer 1

新功能

   function generateMessage(arg1) {
        //create message for each section
        console.log("generating message");
        var div = "<div id=\"sectionError\">";
        if ($("#sectionError").length > 0) {
            $("#sectionError").html('')
        }
        ;$(div).appendTo($(arg1).parent());
        for (var i = 0; i < errors.length; i++) {
            $(errors[i]).appendTo($("#sectionError"));
            console.log(errors[i]);
        }
        $("</div>").appendTo($(arg1).parent());
    }

更改了旧功能

$(document).ready(function() {
    $("#adbutnext").on('click', (function() {
        //check criteria
        if (selectedSlots.length < 1 || $("#positionAppliedFor").get(0).value.length < 1 || $("#maxAmountOfHours").get(0).value.length < 1) {
            //error messages and array          
            var errorForSlots = "<h5>Select at least one availability slot</h5>";
            var errorForPosition = "<h5>Enter the position you wish to apply for<h5>";
            var errorForHours = "<h5>Enter the amount of hours you would like to work<h5>";
            errors = [];

            //add errors to array
            if (selectedSlots.length < 1) {
                errors.push(errorForSlots)
            }
            ;if ($("#positionAppliedFor").get(0).value.length < 1) {
                errors.push(errorForPosition)
            }
            ;if ($("#maxAmountOfHours").get(0).value.length < 1) {
                errors.push(errorForHours)
            }
            ;
            generateMessage(this);

        } else {
            $("#applicationDetails").slideUp();
            $("#personalDetails").slideDown();
            if ($("#sectionError").length > 0) {
                $("#sectionError").remove()
            }
            ;
        }
        console.log("function finished");
    }
    ));
});

Answer 2

我创建了一个小型可重用框架，与jQuery在后台公开可重用函数的方式相同。我没有正确测试append函数，只是在解释如何创建自己的可重用插件以在整个项目中重用。

您可以根据功能更改要公开的参数和方法名称。

我也建议您将此代码作为插件移动到javascript文件中，并拖到jquery脚本之后。

   (function (global, $) {
        //you can pass the jQuery object in to this IIFE
        var DisplayError = function (elementId) {
            return new DisplayError.init(elementId);
        }

        DisplayError.prototype = {
            appendError: function (errors) {
                var div = "<div id=\"" + this.elementId + " \">";
                if ($(this.elementId).length > 0) {
                    $(this.elementId).html('')
                };
                $(div).appendTo($(this.elementId).get(0).parentNode);
                for (var i = 0; i < errors.length; i++) {
                    $(errors[i]).appendTo($(this.elementId));

                }
                $("</div>").appendTo($(this.elementId).get(0).parentNode);
            }
        };

        DisplayError.init = function (elementId) {

            var self = this;
            self.elementId = elementId;
        }

        DisplayError.init.prototype = DisplayError.prototype;

        global.DisplayError = global.DisplayError = DisplayError;


    }(window, jQuery));

您可以直接在init函数中编写用于清除html的代码，以确保在初始化实例本身时清除该元素。

您可以调用如下方法，

var displayError=DisplayError("#sectionError")
displayError.appendError(["errorId"])

             or 

DisplayError("#sectionError").appendError(["errorId"])

希望这会有所帮助

如何创建要在其他功能中稍后重用的功能

2 个答案: