Question

私は$.fn.not(...);関数を少なくとも12回呼び出すJavaScriptファイルを持っています。
コードを最適化して、同じ理由で同じ関数の複数の呼び出しを防止するにはどうすればよいですか？ここで

は私のJSです：それを行うには

$(document).ready(function() { 
    var ba = ".form_elem_program option[value='Business Administration']"; 
    var cjc = ".form_elem_program option[value='Criminal Justice: Corrections']"; 
    var cm = ".form_elem_program option[value='Construction Management']"; 
    var da = ".form_elem_program option[value='Dental Assisting']"; 
    var dh = ".form_elem_program option[value='Dental Hygiene']"; 
    var dms = ".form_elem_program option[value='Diagnostic Medical Sonography']"; 
    var ma = ".form_elem_program option[value='Medical Assisting']"; 
    var mo = ".form_elem_program option[value='Medical Office']"; 
    var pt = ".form_elem_program option[value='Pharmacy Technology']"; 
    var rt = ".form_elem_program option[value='Respiratory Therapy']"; 
    var rn = ".form_elem_program option[value='Registered Nursing']"; 
    var st = ".form_elem_program option[value='Surgical Technology']"; 
    var vt = ".form_elem_program option[value='Veterinary Technology']"; 
    var vn = ".form_elem_program option[value='Vocational Nursing']"; 
    var amt = ".form_elem_program option[value='Aviation Maintenance Technology']"; 
    var et = ".form_elem_program option[value='Electrical Technology']"; 
    var hvac = ".form_elem_program option[value='Heating, Ventilation, Air Conditioning - Refrigeration Technology']"; 
    var imt = ".form_elem_program option[value='Industrial Maintenance Technology']"; 
    if (campus == "visalia") { 
    // XXX: this is the "problem code": 
    $('#program').children().not(":first").not(ba).not(cjc).not(da).not(dh).not(ma).not(mo).not(pt).not(rt).not(rn).not(vn).not(hvac).not(imt).remove(); 
    } 
    if (campus == "porterville") { 
    // XXX: this is the "problem code": 
    $('#program').children().not(":first").not(ba).not(ma).not(mo).remove(); 
    } 
}); 

Answer 1

私はオプション値の配列を使用して、必要なセレクタを生成することにより、スクリプトを簡素化しました無視する。
それは意味する;同じ文字列を文字通り繰り返すのではなく、同じ機能を何度も繰り返し呼び出すのではなく、ただちに作成されたセレクタを使用して$.fn.not(...);関数を呼び出します。
これは、あなたのJSがうんざりしていないこと、およびサイトのパフォーマンスが同じ文字列の何十回の繰り返しや関数の呼び出しによっても影響を受けないことを保証します。ここで

はあなたの簡略化コードです：

jQuery(document).ready(function($) { 
    // create the selectors 
    var cs = function(group) { 
    // prepare the result string 
    var result = ""; 
    // loop through the option value groups 
    for(var i = 0; i < group.length; i++) { 
     result += ".form_elem_program option[value='" + group[i] + "'],"; 
    } 
    // return the generated selector 
    return result; 
    }; 

    // handle the first selector group 
    if(campus == "visalia") { 
    $("#program").children().not(":first").not(cs([ 
     "Business Administration","Medical Assisting","Medical Office" 
    ])).remove(); 
    } 

    // handle the second selector group 
    else if(campus == "porterville") { 
    $("#program").children().not(":first").not(cs([ 
     "Business Administration", "Medical Assisting", "Medical Office", "Criminal Justice: Corrections", 
     "Construction Management", "Dental Assisting", "Dental Hygiene", "Diagnostic Medical Sonography", 
     "Pharmacy Technology", "Respiratory Therapy", "Registered Nursing", "Surgical Technology", 
     "Veterinary Technology", "Vocational Nursing", "Aviation Maintenance Technology", "Electrical Technology", 
     "Heating, Ventilation, Air Conditioning - Refrigeration Technology", "Industrial Maintenance Technology", 
    ])).remove(); 
    } 
}); 

別の方法はこのように、各ないセレクターを無視する$.each(..., ...);を使用セレクタ文字列に各オプションの値を注入する機能を使用することです：

jQuery(document).ready(function($) { 
    // generate a new selector 
    var cs2 = function(value) { 
    return ".form_elem_program option[value='" + value + "']"; 
    }; 
    // create the required selectors 
    var ba = cs2("Business Administration"), 
    cjc = cs2("Criminal Justice: Corrections"), 
    cm = cs2("Construction Management"), 
    da = cs2("Dental Assisting"), 
    dh = cs2("Dental Hygiene"), 
    dms = cs2("Diagnostic Medical Sonography"), 
    ma = cs2("Medical Assisting"), 
    mo = cs2("Medical Office"), 
    pt = cs2("Pharmacy Technology"), 
    rt = cs2("Respiratory Therapy"), 
    rn = cs2("Registered Nursing"), 
    st = cs2("Surgical Technology"), 
    vt = cs2("Veterinary Technology"), 
    vn = cs2("Vocational Nursing"), 
    amt = cs2("Aviation Maintenance Technology"), 
    et = cs2("Electrical Technology"), 
    hvac = cs2("Heating, Ventilation, Air Conditioning - Refrigeration Technology"), 
    imt = cs2("Industrial Maintenance Technology"); 

    // get the elements 
    var elements = $("#program").children().not(":first"); 

    // handle the first selector group 
    if (campus == "visalia") { 
    $.each([ba, cjc, da, dh, ma, mo, pt, rt, rn, v, hvac, imt], function(i, element) { 
     elements = elements.not(element); 
    }); 
    } 

    // handle the second selector group 
    else if (campus == "porterville") { 
    $.each([ba, ma, mo], function(i, element) { 
     elements = elements.not(element); 
    }); 
    } 
}); 

幸運と最高です！

Answer 2

可能な方法は次のようになります。

var elems = $('#program').children().not(":first"); 
if (campus == "visalia") { 
    [ba, cjc, da, dh, ma, mo, pt, rt, rn, v, hvac, imt].forEach(function(e) { 
    elems = elems.not(e); 
    }); 
} 
if (campus == "porterville") { 
    [ba, ma, mo].forEach(function(e) { 
    elems = elems.not(e); 
    }); 
} 
elems.remove(); 

Answer 3

@Mangoと@Isacの回答で提案を受け取り、次のコードで終了しました。 $.not()メソッドをすべて実行するには、$.each()メソッドを使用する必要がありました。

これにより、コードをさらに単純化するために配列とオブジェクトを使用することができました。私たちのプログラムとキャンパスのミックスは絶えず変化しているので、このコードではメンテナンス性が重要です。

// generate a new selector 
var fieldOption = function(value) { 
    return ".form_elem_program option[value='" + value + "']"; 
}; 
// create the required selectors for each program 
var ba = fieldOption("Business Administration"), 
    cjc = fieldOption("Criminal Justice: Corrections"), 
    // there are more programs not included for simplicity of answer 
    imt = fieldOption("Industrial Maintenance Technology"), 
    it = fieldOption("Information Technology"); 

// create object with array of selectors of the campus programs 
var campusPrograms = { 
    visalia:   [ba, cjc, da, dh, ma, mo, pt, rt, rn, vn, hvac, imt], 
    hanford:   [ba, ma, mo], 
    // there are more campuses not included for simplicity of answer 
    delano:   [ba, ma, mo], 
    porterville:  [ba, ma, mo] 
}; 

// run function to pull campus param from URL 
var campusURL = getUrlParams()['campus']; 
// get array from campusPrograms object 
var programs = campusPrograms[campusURL]; 

// remove all programs except ones included in campus array 
var elems = $('#program').children().not(":first"); 

$.each(programs, function(index, value) { 
    elems = elems.not(value); 
}); 

elems.remove();