Javascript 如何合并类似的js函数？

我的问题是，我不知道如何合并这些类似的函数，我很确定有某种方法可以将其简化为一个函数。1099和1100是游戏的id。ajax\u query是我的函数，它使用给定的参数运行ajax查询

$('#away1099').click(function ()
{
    if ($( "#home1099" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1099, 'home', 'remove', 'home', 1);
    }
    else if ($( "#away1099" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1099, 'away', 'remove', 'away');
    }
    else
    {
        ajax_query(1099, 'away', 'add', 'away');
    }
    return false;
});

$('#home1099').click(function ()
{
    if ($( "#away1099" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1099, 'away', 'remove', 'away', 1);
    }
    else if ($( "#home1099" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1099, 'home', 'remove', 'home');
    }
    else 
    {
        ajax_query(1099, 'home', 'add', 'home'); 
    }
    return false;
});


$('#away1100').click(function ()
{
    if ($( "#home1100" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1100, 'home', 'remove', 'home', 1);
    }
    else if ($( "#away1100" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1100, 'away', 'remove', 'away');
    }
    else
    {
        ajax_query(1100, 'away', 'add', 'away');
    }
    return false;
});

$('#home1100').click(function ()
{
    if ($( "#away1100" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1100, 'away', 'remove', 'away', 1);
    }
    else if ($( "#home1100" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1100, 'home', 'remove', 'home');
    }
    else 
    {
        ajax_query(1100, 'home', 'add', 'home'); 
    }
    return false;
});

---

将代码放在一个函数中，该函数接受某种类型的参数，可能还有一个变量。基于此类型，修改函数中的特定代码部分

像这样的可能

var myTypes = {home: 1, away: 2};

function doStuff(type, num)
    var mySelector1;
    switch (type){
        case myTypes.home:
            mySelector1 = "#home" + num;
            break;
        case myTypes.away:
            mySelector1 = "#away" + num;
            break;
    }
    // and so on...
    // change what's needed based on type..
    if ($( mySelector1 ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1099, 'home', 'remove', 'home', 1);
    }
    else if ($( "#away1099" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1099, 'away', 'remove', 'away');
    }
    else
    {
        ajax_query(1099, 'away', 'add', 'away');
    }
}

$('#away1099').click(function ()
{
    doStuff(myTypes.away, '1099');
    return false;
});

$('#home1099').click(function ()
{
    doStuff(myTypes.home, '1099');
    return false;
});
// and so on...

---

将代码放在一个函数中，该函数接受某种类型的参数，可能还有一个变量。基于此类型，修改函数中的特定代码部分

像这样的可能

var myTypes = {home: 1, away: 2};

function doStuff(type, num)
    var mySelector1;
    switch (type){
        case myTypes.home:
            mySelector1 = "#home" + num;
            break;
        case myTypes.away:
            mySelector1 = "#away" + num;
            break;
    }
    // and so on...
    // change what's needed based on type..
    if ($( mySelector1 ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1099, 'home', 'remove', 'home', 1);
    }
    else if ($( "#away1099" ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(1099, 'away', 'remove', 'away');
    }
    else
    {
        ajax_query(1099, 'away', 'add', 'away');
    }
}

$('#away1099').click(function ()
{
    doStuff(myTypes.away, '1099');
    return false;
});

$('#home1099').click(function ()
{
    doStuff(myTypes.home, '1099');
    return false;
});
// and so on...

---

我认为这应该奏效：

$('#away1099,#home1099,#away1100,#home1100').click(function ()
{
   $elem = $(this);
   var number = $elem.attr("id").substr(5),
       word = $elem.attr("id").slice(1,5);

   if ($elem.hasClass( "table-bets-choosen" ))
   {
        ajax_query(number, word, 'remove', word, 1);
   }
   else
   {
        ajax_query(number, word, 'add', word);
   }
   return false;
});

---

我认为这应该奏效：

$('#away1099,#home1099,#away1100,#home1100').click(function ()
{
   $elem = $(this);
   var number = $elem.attr("id").substr(5),
       word = $elem.attr("id").slice(1,5);

   if ($elem.hasClass( "table-bets-choosen" ))
   {
        ajax_query(number, word, 'remove', word, 1);
   }
   else
   {
        ajax_query(number, word, 'add', word);
   }
   return false;
});

这是一个开始

function update(id, action, opposite)
{
    if ($( "#"+action+id ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(id, action, 'remove', action, 1);
    }
    else if ($( "#"+opposite+id ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(id, opposite, 'remove', opposite);
    }
    else
    {
        ajax_query(id, opposite, 'add', opposite);
    }

}

$('#away1099').click(function ()
{
    update(1099, "away", "home");
    return false;
});

$('#home1099').click(function ()
{
    update(1099, "home", "away");
    return false;
});

$('#away1100').click(function ()
{
    update(1100, "away", "home");
    return false;
});

$('#home1100').click(function ()
{
    update(1100, "home", "away");
    return false;
});

在for循环中迭代绑定“单击”之后，这里是一个开始

function update(id, action, opposite)
{
    if ($( "#"+action+id ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(id, action, 'remove', action, 1);
    }
    else if ($( "#"+opposite+id ).hasClass( "table-bets-choosen" ))
    {
        ajax_query(id, opposite, 'remove', opposite);
    }
    else
    {
        ajax_query(id, opposite, 'add', opposite);
    }

}

$('#away1099').click(function ()
{
    update(1099, "away", "home");
    return false;
});

$('#home1099').click(function ()
{
    update(1099, "home", "away");
    return false;
});

$('#away1100').click(function ()
{
    update(1100, "away", "home");
    return false;
});

$('#home1100').click(function ()
{
    update(1100, "home", "away");
    return false;
});

---

在for循环中迭代绑定“click”之后，我会稍微更改HTML以利用数据属性并删除不必要的id。假设可单击的元素是按钮，以便进行论证：

添加数据类型和数据编号，并将ID更改为类：

<button class="gamebutton" data-type="away" data-number="1099">Away 1099</button>
<button class="gamebutton" data-type="home" data-number="1100">Home 1100</button>

---

我会稍微更改HTML以利用数据属性并删除不必要的ID。假设可单击的元素是按钮，以便进行论证：

添加数据类型和数据编号，并将ID更改为类：

<button class="gamebutton" data-type="away" data-number="1099">Away 1099</button>
<button class="gamebutton" data-type="home" data-number="1100">Home 1100</button>

基于类属性驱动此项：

例如：

如果有2个div，如下所示：

 <div id="away1099" />
 <div id="away2000" />

基于类属性驱动此项：

例如：

如果有2个div，如下所示：

 <div id="away1099" />
 <div id="away2000" />

---

将两个或多个值保存在一个数组中，并对其进行迭代：

var array = new Array("away1099", "home1099", "away1100", "home1100");  
for (a = 0; a < 4; a++) {

    $(array[a]).click(function() {
        //i would suggest you redo some of the functions otherwise the solution for your problem will be equaly "bad"
    });
}

---

我想写下在您的情况下必须如何做，但您确实需要详细了解您在这里所做的事情，因为这些函数调用看起来非常冗余，您可以使它们更友好、更易于使用。

将两个或多个值保存在一个数组中，并对其进行迭代：

var array = new Array("away1099", "home1099", "away1100", "home1100");  
for (a = 0; a < 4; a++) {

    $(array[a]).click(function() {
        //i would suggest you redo some of the functions otherwise the solution for your problem will be equaly "bad"
    });
}

---

我想写下在您的情况下必须如何做，但您确实需要详细了解您在这里所做的事情，因为这些函数调用看起来非常冗余，您可以使它们变得更好、更易于使用。

我喜欢这个解决方案的简单性。我只是喜欢这个解决方案的简单性。JQuery来营救。