簡化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代碼？

回答

相關問題