Javascript 如何使jQuery代码更简单有效

我有以下两个功能在这里工作的伟大！ 正如您所看到的，这两个函数几乎相同，除了每个函数中最后一条注释下面的代码

我该如何使它更简单。我可以做一个代码“持有者”——我只包含另一个文件中代码的一部分吗？所以我在每个函数中没有太多“相同”的代码

我应该使用一些课程还是我从来没有上过课

///函数（添加新字段）

///函数（del_字段）

我怎么能做出这样的东西

///我想在函数中包含这段代码。所以我不必写两遍

        var flex0 = $(this);
        var flex1 = $(this).parent().closest('div'); 
        var flex2 = $(flex1).parent().closest('div');
        var flex3 = $(flex2).parent().closest('div'); 
        var flex4 = $(flex3).parent().closest('div'); 
        var flex5 = $(flex4).parent().closest('div'); 
        var flex6 = $(flex5).parent().closest('div'); 

        var wrapID = flex6.attr('id'); // wrapID
        var accordionContentID = flex5.attr('id');
        var acContentBoxID = flex4.attr('id'); // sharedID
        var acChildBoxID = flex3.attr('id'); // langID
        var acBabyBoxID = flex2.attr('id'); // langID
        var SecondID = flex1.attr('id'); // OLD : AddLangBoxID
        var FirstID = flex0.attr('id'); //  OLD : add_new_fieldID

---

谢谢。

如果您想在javascript中实现类似类的功能，最好使用原型，因为javascript没有类

在这种情况下，我不确定你的代码是做什么的，所以原型可能不是最好的答案。另一个选项是将所有变量定义封装在另一个函数中，并在两个单击函数中调用该函数。它将返回一个带有属性的对象，而不是一堆

var

s

var myVarFn = function(){
    var returnObject = {};

    returnObject.flex0 = $(this);
    returnObject.flex1 = $(this).parent().closest('div'); 
    ...

    returnObject.wrapID = flex6.attr('id'); // wrapID
    ...

    return returnOBject
}

要在单击中使用它，

此

的定义与单击功能的范围相同：

$(document).on("click", '.del_field', function(e) {
    var dataObject = myVarFn.call(this);

    //Other code
};

在另一个点击事件中

$(document).on("click", '.add_new_field', function(e) {
    var dataObject = myVarFn.call(this);

    //Other code
};

---

您必须修改其他代码以使用

dataObject.flex0

而不是

flex0

等等。

创建全局对象

var allId = new Object();

以及一个可以在需要时调用的函数

function getAllIDs(el) {
    var id = ["wrapID", "accordionContentID", "acContentBoxID", "acChildBoxID", "acBabyBoxID", "SecondID", "FirstID"];
    var flex;
    for (var i = 0; i <= 6; i++) {
        if (i == 0) {
            flex = $(el).parent().closest('div');
        } else {
            flex = $(flex).parent().closest('div');
        }
        allId.id[i] = $(flex).parent().closest('div').attr('id');
    }
}

---

您可以使用while循环来循环变量（flex 0到6）。这是正确的。但是，如果我想在每个函数中使用相同的代码，而不是在每个函数中编写相同的代码，那么该怎么办？是否有某种方法可以编写一次代码并将其包含在每个函数中？

var accordionContentID=$（flex4.parent（）.closest（'div'）.attr（'id'）

你可以在

\u for或while循环中执行类似的操作

我知道。比如说，代码是另一种东西。但我想包括而不是写两次这个问题似乎是离题的，因为它要求codereview，因此属于代码工作（很好！）我只是想知道如何创建一个xxx.js文件，我从第4-20行开始在函数中包含该代码所以我不必在两个函数中都写相同的函数，这就是我所描述的。您可以在每个click函数中调用myVarFn一次，并让它将所有变量定义为对象上的属性。我编辑了我的答案，让它更清楚一点。我得到一个错误：SyntaxError:Expected token'（“function myVarFn=function（）{”。否则我想我现在明白了：）我把它改为：function myVarFn（）{。谢谢你的解决方案。哦，应该是

function myVarFn（）

或

var myVarFn=function（）

。修复了我的示例。

var allId = new Object();

function getAllIDs(el) {
    var id = ["wrapID", "accordionContentID", "acContentBoxID", "acChildBoxID", "acBabyBoxID", "SecondID", "FirstID"];
    var flex;
    for (var i = 0; i <= 6; i++) {
        if (i == 0) {
            flex = $(el).parent().closest('div');
        } else {
            flex = $(flex).parent().closest('div');
        }
        allId.id[i] = $(flex).parent().closest('div').attr('id');
    }
}

$(document).on("click", '.add_new_field', function (e) {
    e.preventDefault();
    getAllIDs(this);
});