简化JQuery代码？

注意：我加入这发现的jsfiddle在this link 简化JQuery代码？

我已经写了一些基本的jQuery代码从3的一个表操纵行，处理几个按钮点击和复选框。我现在非常喜欢n00b。我正在研究这一点，并意识到有很多可以变成更通用的函数，但我不熟悉创建JS函数。任何指针都会受到欢迎。

由于我有类似的功能块，我宁愿讨论如何简化每个块类型。

buttonSwap
选择/取消选取其余检查表
移动检查表
显示/隐藏面板

下面是代码：

<script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 

     $('#displayActivePanel').hide(); 
     $('#displayInactivePanel').hide(); 

     // Button event handlers to move items from/to differing tables... 
     $('#TableAdminPortfolio tbody .buttonSwap').live('click', function() { 
      var tr = $(this).closest('tr'); 
      var stat = tr.children('.padLeft.status').text().trim(); 
      var tableActiveProjects = $('#TableActiveProjects tbody'); 
      var tableInactiveProjects = $('#TableInactiveProjects tbody'); 

      tr.fadeOut(1000); 
      if (stat == 'Active') { 
       tableActiveProjects.prepend(tr); 
      } else { 
       tableInactiveProjects.prepend(tr); 
      } 
      tr.fadeIn(1000); 
     }); 

     $('#TableActiveProjects tbody .buttonSwap').live('click', function() { 
      var tr = $(this).closest('tr'); 
      var tableAdminPortfolio = $('#TableAdminPortfolio tbody'); 

      tr.fadeOut(1000); 
      tableAdminPortfolio.prepend(tr); 
      tr.fadeIn(1000); 
     }); 

     $('#TableInactiveProjects tbody .buttonSwap').live('click', function() { 
      var tr = $(this).closest('tr'); 
      var tableAdminPortfolio = $('#TableAdminPortfolio tbody'); 

      tr.fadeOut(1000); 
      tableAdminPortfolio.prepend(tr); 
      tr.fadeIn(1000); 
     }); 

     $('#masterCheckBoxAdminPortfolio').live('change', function() { 
      var isChecked = $('#masterCheckBoxAdminPortfolio:checked').val() != undefined; 

      var list = $('#TableAdminPortfolio .CheckBoxProjects'); 
      list.each(function() { 
       this.checked = isChecked; 
      }); 
     }); 
     $('#TableActiveProjectsCheckbox').live('change', function() { 
      var isChecked = $('#TableActiveProjectsCheckbox:checked').val() != undefined; 

      var list = $('#TableActiveProjects .CheckBoxProjects'); 
      list.each(function() { 
       this.checked = isChecked; 
      }); 
     }); 
     $('#TableInactiveProjectsCheckbox').live('change', function() { 
      var isChecked = $('#TableInactiveProjectsCheckbox:checked').val() != undefined; 

      var list = $('#TableInactiveProjects .CheckBoxProjects'); 
      list.each(function() { 
       this.checked = isChecked; 
      }); 
     }); 

     $('#TableAdminPortfolioRemoveAllChecked').live('click', function() { 
      var list = $('#TableAdminPortfolio .CheckBoxProjects'); 
      list.each(function() { 
       var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined; 
       if (isChecked) { 
        var tr = $(this).closest('tr'); 
        var stat = tr.children('.padLeft.status').text().trim(); 
        var tableActiveProjects = $('#TableActiveProjects tbody'); 
        var tableInactiveProjects = $('#TableInactiveProjects tbody'); 

        tr.fadeOut(1000); 
        if (stat == 'Active') { 
         tableActiveProjects.prepend(tr); 
        } else { 
         tableInactiveProjects.prepend(tr); 
        } 
        tr.fadeIn(1000); 
       } 
      }); 
     }); 
     $('#TableActiveProjectsAddAllChecked').live('click', function() { 
      var tableAdminPortfolio = $('#TableAdminPortfolio tbody'); 
      var list = $('#TableActiveProjects .CheckBoxProjects'); 
      list.each(function() { 
       var tr = $(this).closest('tr'); 
       var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined; 
       if (isChecked) { 
        tr.fadeOut(1000); 
        tableAdminPortfolio.prepend(tr); 
        tr.fadeIn(1000); 
       } 
      }); 
     }); 
     $('#TableInactiveProjectsAddAllChecked').live('click', function() { 
      var tableAdminPortfolio = $('#TableAdminPortfolio tbody'); 
      var list = $('#TableInactiveProjects .CheckBoxProjects'); 
      list.each(function() { 
       var tr = $(this).closest('tr'); 
       var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined; 
       if (isChecked) { 
        tr.fadeOut(1000); 
        tableAdminPortfolio.prepend(tr); 
        tr.fadeIn(1000); 
       } 
      }); 
     }); 

     $('#showActivePanel').click(function() { 
      $('#displayActivePanel').show(); 
     }); 
     $('#hideActivePanel').click(function() { 
      $('#displayActivePanel').hide(); 
     }); 
     $('#showInactivePanel').click(function() { 
      $('#displayInactivePanel').show(); 
     }); 
     $('#hideInactivePanel').click(function() { 
      $('#displayInactivePanel').hide(); 
     }); 
    }); 
} 
</script>

来源

2013-02-27 Keith Barrows

实际上，考虑到每个处理程序的大部分不同的事情，你可以做的事情并不多，以简化这一点。 – 2013-02-27 16:58:36

很难说没有看到html。底部的显示/隐藏可能可以改为切换功能。如果你可以做一个很好的http://jsfiddle.net。 – Jrod 2013-02-27 17:03:04

查看jsfiddle链接的问题顶部... – 2013-02-27 18:41:35

没有HTML，它很难测试任何东西。但是这完全是因为它在飞行中，只是因为我喜欢挑战而且我很无聊。至少，它应该为您提供函数的起点......如何将项传递给函数，以及函数如何使用这些参数。

$(document).ready(function() { 
function hideIt($item) { 
    $item.hide(); 
} 

function prependPortfolio($tr,$portfolio){ 
    $tr.fadeOut(1000); 
    $portfolio.prepend($tr); 
    $tr.fadeIn(1000); 
} 

function setCheck($check,$list){ 
    $list.each(function(){ 
     $(this).prop('checked',$check); 
    } 
} 

function moveItems($tr,$stat,$active,$inactive){ 
    $tr.fadeOut(1000); 
    if ($stat == 'Active') { 
     $active.prepend($tr); 
    } else { 
     $inactive.prepend($tr); 
    } 
    $tr.fadeIn(1000); 
} 

function addAllChecked($check,$list){ 
    $list.each(function() { 
     var $tr = $(this).closest('tr'), 
      $check = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined; 
     if ($check) { 
      prependPortfolio(tr,tableAdminPortfolio); 
     } 
    }); 
} 

hideIt($('#displayActivePanel')); 
hideIt($('#displayInactivePanel')); 

// Button event handlers to move items from/to differing tables... 
$('#TableAdminPortfolio tbody .buttonSwap').live('click', function() { 
    var tr = $(this).closest('tr'), 
     stat = tr.children('.padLeft.status').text().trim(), 
     tableActiveProjects = $('#TableActiveProjects tbody'), 
     tableInactiveProjects = $('#TableInactiveProjects tbody'); 

    moveItems(tr,stat,tableActiveProjects,tableInactiveProjects); 
}); 

$('#TableActiveProjects tbody .buttonSwap').on('click', function() { 
    var tr = $(this).closest('tr'), 
     tableAdminPortfolio = $('#TableAdminPortfolio').find('tbody'); 

    prependPortfolio(tr,tableAdminPortfolio); 
}); 

$('#TableInactiveProjects tbody .buttonSwap').on('click', function() { 
    var tr = $(this).closest('tr'), 
     tableAdminPortfolio = $('#TableAdminPortfolio').find('tbody'); 

    prependPortfolio(tr,tableAdminPortfolio); 
}); 

$('#masterCheckBoxAdminPortfolio').on('change', function() { 
    var isChecked = $('#masterCheckBoxAdminPortfolio:checked').val() != undefined, 
     list = $('#TableAdminPortfolio .CheckBoxProjects'); 

    setCheck(isChecked,list); 
}); 
$('#TableActiveProjectsCheckbox').on('change', function() { 
    var isChecked = $('#TableActiveProjectsCheckbox:checked').val() != undefined, 
     list = $('#TableActiveProjects .CheckBoxProjects'); 

    setCheck(isChecked,list); 
}); 
$('#TableInactiveProjectsCheckbox').on('change', function() { 
    var isChecked = $('#TableInactiveProjectsCheckbox:checked').val() != undefined, 
     list = $('#TableInactiveProjects .CheckBoxProjects'); 

    setCheck(isChecked,list); 
}); 

$('#TableAdminPortfolioRemoveAllChecked').on('click', function() { 
    var $list = $('#TableAdminPortfolio .CheckBoxProjects'); 

    $list.each(function() { 
     var $check = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined; 
     if ($check) { 
      var tr = $(this).closest('tr'), 
       stat = tr.children('.padLeft.status').text().trim(), 
       tableActiveProjects = $('#TableActiveProjects tbody'), 
       tableInactiveProjects = $('#TableInactiveProjects tbody'); 

      moveItems(tr,stat,tableActiveProjects,tableInactiveProjects); 
     } 
    }); 
}); 

$('#TableActiveProjectsAddAllChecked').on('click', function() { 
    var tableAdminPortfolio = $('#TableAdminPortfolio tbody'), 
     list = $('#TableActiveProjects .CheckBoxProjects'); 

    addAllChecked(tableAdminPortfolio,list); 
}); 

$('#TableInactiveProjectsAddAllChecked').on('click', function() { 
    var tableAdminPortfolio = $('#TableAdminPortfolio tbody'), 
     list = $('#TableInactiveProjects .CheckBoxProjects'); 

    addAllChecked(tableAdminPortfolio,list); 
}); 

$('#showActivePanel').on('click',function(){ 
    $(this).toggle(); 
}); 

$('#showInactivePanel').on('click',function(){ 
    $(this).toggle(); 
}); 
});

这应该工作，因为我只是复制并粘贴和移动的东西，但零保证。我真正做的唯一事情改变了它的设置方式，不是单独声明每个变量，而是在一个大的声明中用逗号分隔它们。

来源

2013-02-27 17:12:36 PlantTheIdea

简化JQuery代码？

回答

相关问题