如何合并类似的js函数？

My problem is that I don't know how to merge those similar functions, I'm pretty sure there is some way to cut it to one function. 1099 and 1100 is id of game. ajax_query is my function which runs an ajax query with given parameters.

我的问题是我不知道如何合并这些类似的函数，我很确定有一些方法可以将它剪切成一个函数。 1099和1100是游戏的id。 ajax_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;
});

6 个解决方案

#1

Drive this on the basis of class attribute :

在class属性的基础上驱动它：

for example:

例如：

if there are 2 divs like below:

如果有2个div如下：

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

and then add some class to it :

然后添加一些类：

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

then bind jquery event to class selectors:

然后将jquery事件绑定到类选择器：

$('.away').click(function ()
{
   // your logic
});

#2

Put your code to a single function that accepts some kind of "type" parameter and maybe one more variable. Based on this "type" amend the particular code parts in the function.

将您的代码放到一个函数中，该函数接受某种“类型”参数，也许还有一个变量。基于此“类型”修改函数中的特定代码部分。

Something like this maybe...

这样的事可能......

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...

#3

I think this should work:

我认为这应该有效：

$('#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;
});

#4

Here is a start.

这是一个开始。

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;
});

After you can iterate for the bind('click') in a for loop

之后可以在for循环中迭代绑定（'click'）

#5

Save the two(or more) values in a array and iterate through it:

将两个（或更多）值保存在数组中并迭代它：

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"
    });
}

I wanted to write down how you would have to do it exactly in your case but m8 you really need to go through what exactly you are doing here because those function calls seem so redundant that you could make them much nicer and easier to work with.

我想写下你将如何在你的情况下完全做到这一点，但是m8你真的需要仔细检查你在这里做了什么，因为那些函数调用似乎是多余的，你可以使它们更好更容易使用。

#6

I would change the HTML slightly to take advantage of data attributes and remove unnecessary IDs. Assuming the clickable elements are buttons for the sake of argument:

我会稍微更改HTML以利用数据属性并删除不必要的ID。假设可点击元素是用于参数的按钮：

Add a data-type and data-number and change the ID to a class:

添加数据类型和数据编号，并将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>

Set up the function:

设置功能：

function gameButtonClick() {

  // get the type and the number from the data attributes
  var type = $(this).data('type');

  // get the opposite type for use later
  var otherType = type === home ? 'away' : 'home';

  // because we need the number value as an integer we need to parse it to one
  var number = parseInt($(this).data('number'), 10);

  if ($(this).hasClass( "table-bets-choosen" )) {

    // and you can use the new type/number variables throughout the function
    ajax_query(number, type, 'remove', type, 1);
  } else if ($('button[data-type="' + otherType + '"][data-number="' + number + '"]').hasClass( "table-bets-choosen" )) {
    ajax_query(number, type, 'remove', type);
  } else {
    ajax_query(number, type, 'add', type);
  }
  return false;
}

// Clicking on a button of a certain class calls the function
$('.gamebutton').click(gameButtonClick);

DEMO

DEMO

#1