このJavaScriptコードを美化/リファクタリングする方法は？

Question

前に私は美しいjsコードin this linkについて尋ねる質問がありますが、インデックス番号の代わりにという単語を使用しているので、今度はこのコードを美しくする方法がわかりません。（ボルトで固定言葉が、それは私の前の質問と同じではありません理由です）

オリジナルJSコード

//food 
$("#food_east").keyup(function() 
{ 
    samefunction(); 
}); 

$("#food_west").keyup(function() 
{ 
    samefunction(); 
}); 

$("#food_north").keyup(function() 
{ 
    samefunction(); 
}); 

$("#food_south").keyup(function() 
{ 
    samefunction(); 
}); 

//beverage 
$("#beverage_east").keyup(function() 
{ 
    samefunction(); 
}); 

$("#beverage_west").keyup(function() 
{ 
    samefunction(); 
}); 

$("#beverage_north").keyup(function() 
{ 
    samefunction(); 
}); 

$("#beverage_south").keyup(function() 
{ 
    samefunction(); 
}); 

そして、これが唯一の食品や飲料である、私はそのようなキャンディー、スナックなどなどが含まれていませんそれはあまりにも面倒なので、私のコードをすべてここにダンプするからです。私はこの解決策を思いつくことができます、より良い解決策はありますか？

var compass = ["east", "west", "north", "south"]; 

    for(var i=0; i<3; i++) 
    { 
     var name = "#food_"; 
     name += compass[i]; 

     $(name).keyup(function() { 
      samefunction(); 
     }); 

     var name = "#beverage_"; 
     name += lokasi[i]; 

     $(name).keyup(function() { 
      samefunction(); 
     }); 
    } 

Answer 1

ではなく、要素ごとに1つのユニークな識別子で、クラスを使用します。クラスはグループ名に似ています。そのクラスのすべての要素を一度に選択できます。

$(".someClass").keyup(function() { 
 
    console.log("Keyup event!") 
 
    // Do stuff 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="someClass" type="text" /> 
 
<input class="someClass" type="text" /> 
 
<input class="someClass" type="text" /> 
 
<input class="someClass" type="text" /> 
 
<input class="someClass" type="text" /> 
 
<input class="someClass" type="text" />

Answer 2

これは、発明されたクラスが同じクラスのすべての要素を与え、そのクラスに関数をバインドする理由です。

もう一つの方法は、セレクタを使用することができ「で始まる」：$(‘[id^=“food_”]’).keyup...