Question

我的问题是我不知道如何合并这些类似的功能，我很确定有一些方法可以将它切换为一个功能。 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;
});

Answer 1

根据类属性

推动此操作

例如：

如果有以下2个div：

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

然后添加一些类：

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

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

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

Answer 2

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

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

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

Answer 3

我认为这应该有效：

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

Answer 4

这是一个开始。

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循环中迭代盲人（＆＃39;点击n＃39;）

Answer 5

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

添加data-type和data-number并将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>

设置功能：

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

Answer 6

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

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

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

如何合并类似的js函数？

6 个答案: