javascript - 如何美化/重构这段JavaScript代码？

Question

这个问题已经有答案了:

Is it possible to beautify this JavaScript code? (3 个回答)

已关闭 5 年前。

之前我有关于美化js代码的问题询问in this link ，但是这次我不确定如何美化下面的代码，因为我使用单词而不是索引号。( bolt 词是它与我之前的问题不一样的原因)

原始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

使用类，而不是每个元素一个唯一标识符。类就像组名。可以一次选择具有该类的所有元素。

$(".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" />