Question

我在这里遵循两个功能，效果很好！正如您所看到的，这两个函数几乎相同，除了每个函数中最后一个注释下面的代码。

如何使这更简单。我可以制作一个代码 - “持有者” - 我只在其他文件中包含一部分代码吗？所以我在每个函数中都没有“相同”的代码？

我应该使用某种课程还是？ - 我从未参加过课程。

///功能（add_new_field）

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

        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');

        /*console.log(
        ' -> WrapID:'+flex6.attr('id')+
        ' -> accordionContentID:'+flex5.attr('id')+
        ' -> acContentBoxID:'+flex4.attr('id')+
        ' -> acChildBoxID:'+flex3.attr('id')+
        ' -> acBabyBoxID:'+flex2.attr('id')+
        ' -> SecondID:'+flex1.attr('id')+
        ' -> FirstID:'+flex0.attr('id')
        );*/

        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

       // there is a lot more code here...

   )};

///功能（del_field）

    $(document).on("click", '.del_field', function(e) {
    e.preventDefault();

        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


        // there is a lot more code her

       )};

我怎么能做这样的事。

///我想将这些代码包含在函数中。所以我不必写两次。

        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

谢谢。

Answer 1

如果你想在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
}

要在点击中使用它，this的定义与点击功能的范围相同：

$(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，依此类推。

Answer 2

创建全局对象

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

此外，在jQuery事件上，您可以调用getAllIDs函数

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

More details about javascript objects

如何使这个jQuery代码更简单有效

2 个答案: