时间戳

首页 > 解决方案 > 如何创建一个函数以供稍后在另一个函数中重用

javascript - 如何创建一个函数以供稍后在另一个函数中重用

问题描述

我得到了这个代码：

$(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”，所以我也不知道如何在我的新函数中解决这个问题......

诚然，我是这方面的新手，我并不完全了解所有来龙去脉，希望您能提供帮助。

也许有更好的方法来做到这一点？不管怎样，让我知道你的想法！谢谢。

标签： javascriptjquery

解决方案

新功能 

   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");
    }
    ));
});

推荐阅读