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

这就是为什么发明的类......给每个元素赋予相同的类并将函数绑定到该类。

另一种方法是使用选择器'starts with'：$(‘[id^=“food_”]’).keyup...

Answer 2

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

如何美化/重构此JavaScript代码？

2 个答案: