配列を使用してjqueryコードを短くしますか？

Question

私は正しく動作しているこのスクリプト（devbridge autocompleteスクリプトが変更されている）を持っていますが、非常に醜い見栄えの長いコードがあります。私はプロのプログラマーではありませんので、どうか私はそれを作ることができますより短い配列を使用していますが、imを実装する方法がわかりません。私のスクリプトでは、2つの変数から2つの値を取得し、$ msB変数はBranch Nameに続けて、Branch Telephone Numberには$ msTを、その後にも番号を割り当てます。したがって、branch1の場合は$ msB1と$ msT1となります。ここに私のコードは次のとおりです。

<script> 
$msB1 = branch_name1; 
$msB2 = branch_name2; 
$msB3 = branch_name3; 
$msB4 = branch_name4; 
$msB5 = branch_name5; 
$msB6 = branch_name6; 
$msB7 = branch_name7; 
$msB8 = branch_name8; 
$msB9 = branch_name9; 
$msB10 = branch_name10; 
$msB11 = branch_name11; 
$msB12 = branch_name12; 
$msB13 = branch_name13; 
$msB14 = branch_name14; 
$msB15 = branch_name15; 
$msB16 = branch_name16; 
$msB17 = branch_name17; 
$msB18 = branch_name18; 
$msB19 = branch_name19; 
$msB20 = branch_name20; 
$msB21 = branch_name21; 
$msB22 = branch_name22; 
$msB23 = branch_name23; 
$msB24 = branch_name24; 
$msB25 = branch_name25; 
$msB26 = branch_name26; 
$msB27 = branch_name27; 
$msB28 = branch_name28; 
$msB29 = branch_name29; 
$msB30 = branch_name30; 
$msB31 = branch_name31; 
$msB32 = branch_name32; 
$msB33 = branch_name33; 
$msB34 = branch_name34; 
$msB35 = branch_name35; 
$msB36 = branch_name36; 
$msB37 = branch_name37; 
$msB38 = branch_name38; 
$msB39 = branch_name39; 
$msB40 = branch_name40; 
$msB41 = branch_name41; 
$msB42 = branch_name42; 
$msB43 = branch_name43; 
$msB44 = branch_name44; 
$msB45 = branch_name45; 
$msB46 = branch_name46; 
$msB47 = branch_name47; 
$msB48 = branch_name48; 
$msB49 = branch_name49; 
$msB50 = branch_name50; 
$msT1 = branch_tel1; 
$msT2 = branch_tel2; 
$msT3 = branch_tel3; 
$msT4 = branch_tel4; 
$msT5 = branch_tel5; 
$msT6 = branch_tel6; 
$msT7 = branch_tel7; 
$msT8 = branch_tel8; 
$msT9 = branch_tel9; 
$msT10 = branch_tel10; 
$msT11 = branch_tel11; 
$msT12 = branch_tel12; 
$msT13 = branch_tel13; 
$msT14 = branch_tel14; 
$msT15 = branch_tel15; 
$msT16 = branch_tel16; 
$msT17 = branch_tel17; 
$msT18 = branch_tel18; 
$msT19 = branch_tel19; 
$msT20 = branch_tel20; 
$msT21 = branch_tel21; 
$msT22 = branch_tel22; 
$msT23 = branch_tel23; 
$msT24 = branch_tel24; 
$msT25 = branch_tel25; 
$msT26 = branch_tel26; 
$msT27 = branch_tel27; 
$msT28 = branch_tel28; 
$msT29 = branch_tel29; 
$msT30 = branch_tel30; 
$msT31 = branch_tel31; 
$msT32 = branch_tel32; 
$msT33 = branch_tel33; 
$msT34 = branch_tel34; 
$msT35 = branch_tel35; 
$msT36 = branch_tel36; 
$msT37 = branch_tel37; 
$msT38 = branch_tel38; 
$msT39 = branch_tel39; 
$msT40 = branch_tel40; 
$msT41 = branch_tel41; 
$msT42 = branch_tel42; 
$msT43 = branch_tel43; 
$msT44 = branch_tel44; 
$msT45 = branch_tel45; 
$msT46 = branch_tel46; 
$msT47 = branch_tel47; 
$msT48 = branch_tel48; 
$msT49 = branch_tel49; 
$msT50 = branch_tel50; 

$(function(){ 
    var areas = [ 
    { value: '".$msB1."', data: '".$msT1."' }, 
{ value: '".$msB2."', data: '".$msT2."' }, 
{ value: '".$msB3."', data: '".$msT3."' }, 
{ value: '".$msB4."', data: '".$msT4."' }, 
{ value: '".$msB5."', data: '".$msT5."' }, 
{ value: '".$msB6."', data: '".$msT6."' }, 
{ value: '".$msB7."', data: '".$msT7."' }, 
{ value: '".$msB8."', data: '".$msT8."' }, 
{ value: '".$msB9."', data: '".$msT9."' }, 
{ value: '".$msB10."', data: '".$msT10."' }, 
{ value: '".$msB11."', data: '".$msT11."' }, 
{ value: '".$msB12."', data: '".$msT12."' }, 
{ value: '".$msB13."', data: '".$msT13."' }, 
{ value: '".$msB14."', data: '".$msT14."' }, 
{ value: '".$msB15."', data: '".$msT15."' }, 
{ value: '".$msB16."', data: '".$msT16."' }, 
{ value: '".$msB17."', data: '".$msT17."' }, 
{ value: '".$msB18."', data: '".$msT18."' }, 
{ value: '".$msB19."', data: '".$msT19."' }, 
{ value: '".$msB20."', data: '".$msT20."' }, 
{ value: '".$msB21."', data: '".$msT21."' }, 
{ value: '".$msB22."', data: '".$msT22."' }, 
{ value: '".$msB23."', data: '".$msT23."' }, 
{ value: '".$msB24."', data: '".$msT24."' }, 
{ value: '".$msB25."', data: '".$msT25."' }, 
{ value: '".$msB26."', data: '".$msT26."' }, 
{ value: '".$msB27."', data: '".$msT27."' }, 
{ value: '".$msB28."', data: '".$msT28."' }, 
{ value: '".$msB29."', data: '".$msT29."' }, 
{ value: '".$msB30."', data: '".$msT30."' }, 
{ value: '".$msB31."', data: '".$msT31."' }, 
{ value: '".$msB32."', data: '".$msT32."' }, 
{ value: '".$msB33."', data: '".$msT33."' }, 
{ value: '".$msB34."', data: '".$msT34."' }, 
{ value: '".$msB35."', data: '".$msT35."' }, 
{ value: '".$msB36."', data: '".$msT36."' }, 
{ value: '".$msB37."', data: '".$msT37."' }, 
{ value: '".$msB38."', data: '".$msT38."' }, 
{ value: '".$msB39."', data: '".$msT39."' }, 
{ value: '".$msB40."', data: '".$msT40."' }, 
{ value: '".$msB41."', data: '".$msT41."' }, 
{ value: '".$msB42."', data: '".$msT42."' }, 
{ value: '".$msB43."', data: '".$msT43."' }, 
{ value: '".$msB44."', data: '".$msT44."' }, 
{ value: '".$msB45."', data: '".$msT45."' }, 
{ value: '".$msB46."', data: '".$msT46."' }, 
{ value: '".$msB47."', data: '".$msT47."' }, 
{ value: '".$msB48."', data: '".$msT48."' }, 
{ value: '".$msB49."', data: '".$msT49."' }, 
{ value: '".$msB50."', data: '".$msT50."' },  
    ]; 

    $('#autocomplete.autocomplete({ 
    lookup: areas, 
    onSelect: function (suggestion) {    
     var thehtml = '<a href=\"tel:+63'+ suggestion.data +'\">' + suggestion.data + '</a><div>' + suggestion.value + ' branch found</div>'; 
     $('#outputcontent.html(thehtml); 
    } 
    }); 

}); 
</script> 

を出力するように上記のスクリプトでは、これはコード

<div id="searchfield"> 
     <form><input type="text" name="areas" class="biginput" id="autocomplete"></form> 
     </div>  
    <div> 
     <p id="outputcontent"> 
     </p>   
    </div> 

され、再びスクリプトは、私だけの違い後のスクリプトを短くするための方法を見つけたい取り組んでいます変数は数字だけです私はそれをうまく説明してきたし、私も誰かが私を助けることができることを期待しています願って

：D

おかげでたくさん

Answer 1

あなたが実際に求めていることは、変数を動的に作成できるかどうかです。 幸いにも答えはyesです。

"eval"を使用することができますが、欠点があります。 コード構造を変更して、すべての変数をJSONオブジェクトのキーとして保存するようにしてください。動的オブジェクトキーを作成するのと同じくらい簡単に簡単かつ安全であり、かつ：私はその良いアイデアは、別の解決策を見つけることを願っていますかどうかわからないセキュリティイムについて何も知らないので、

allBranches = { 
 
\t branch_name1: 'some data 1' \t , 
 
\t branch_name2: 'some data 2' \t , 
 
\t branch_name3: 'some data 3' \t , 
 
\t // etc... 
 
} 
 
var myData = {}; 
 
for (var i = 1; i < Object.keys(allBranches).length; i++){ 
 
\t myData['$msB' + i] = allBranches['branch_name' + i]; 
 
}

Answer 2

私は考えることができますが、もっとも安全なコードではなく関数を使用してコードを生成し、それを評価します（ "eval"を使用）。

最初の部分のための例は次のようになります。

function declareVars(varPrefix, varStart, varEnd, valuePrefix, valueStart){ 
 
\t var declaration = '', nextVar = ''; 
 
\t for (var i = varStart; i <= varEnd; i++){ 
 
\t \t nextVar = (varPrefix + i + ' = ' + valuePrefix + valueStart + ';\n'); 
 
\t \t valueStart ++; 
 
\t \t declaration += nextVar; 
 
\t } 
 
\t return declaration; 
 
} 
 

 

 
var finalStatement = 
 
\t declareVars('$msB', 1, 50, 'branch_name', 1) + 
 
\t declareVars('$msT', 1, 50, 'branch_tel', 1); 
 

 
console.log(finalStatement); //replace this with: eval(finalStatement)

をしかし、このアプローチは、多くの注意点があることに注意してください、あなたはここで多くを読むことができます：

Why is using the JavaScript eval function a bad idea?

Is Javascript eval() so dangerous?

しかし、匿名関数を使用してスコープなどを隠すことで、 "eval"のセキュリティ上の欠陥から身を守る方法があります。