避免 jQuery 中函数的重复

Question

该函数编写了两次，以保存复选框状态以及相应的 div 文本。如何在函数中编写一次代码，然后分别在加载和单击事件时调用它两次？

$(document).ready(function() {
                    $("#bquote").load("quotes_in.php", function() { 

                    // a key prefix is used for the cookie/storage
                    var storedData = getStorage('com_mysite_checkboxes_'); 

                    $('div.check input:checkbox').bind('change',function(){
                    $('#ab_' + this.id).toggle($(this).is(':checked'));

                    // save the data on change
                    storedData.set(this.id, $(this).is(':checked')?'checked':'not');
                    }).each(function() {

                    // on load, set the value to what we read from storage:
                    var val = storedData.get(this.id);
                    if (val == 'checked') $(this).attr('checked', 'checked');
                    if (val == 'not') $(this).removeAttr('checked');
                    if (val) $(this).trigger('change');

                    });
                 });                 

            });



            $(function() {


            /*load quotes on click of link*/
            $("a#main")
                .click(function() {
                   $(this).addClass("current"); 
                   $("#bquote").load("quotes_in.php", function() {  

                    // a key prefix is used for the cookie/storage
                    var storedData = getStorage('com_mysite_checkboxes_'); 

                    $('div.check input:checkbox').bind('change',function(){
                    $('#ab_' + this.id).toggle($(this).is(':checked'));

                    // save the data on change
                    storedData.set(this.id, $(this).is(':checked')?'checked':'not');
                    }).each(function() {

                    // on load, set the value to what we read from storage:
                    var val = storedData.get(this.id);
                    if (val == 'checked') $(this).attr('checked', 'checked');
                    if (val == 'not') $(this).removeAttr('checked');
                    if (val) $(this).trigger('change');

                        });      
                });
            });

Answer 1

您可以将其声明为命名函数一次并调用它两次，如下所示：

$(function() {
  function loadQuotes() {
    $("#bquote").load("quotes_in.php", function() { 

      // a key prefix is used for the cookie/storage
      var storedData = getStorage('com_mysite_checkboxes_'); 

      $('div.check input:checkbox').bind('change',function(){
        $('#ab_' + this.id).toggle(this.checked);

        // save the data on change
        storedData.set(this.id, this.checked?'checked':'not');
      }).each(function() {

        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked') $(this).attr('checked', 'checked');
        if (val == 'not') $(this).removeAttr('checked');
        if (val) $(this).trigger('change');

      });
    });                 
  }
  $("a#main").click(function() {
    $(this).addClass("current"); 
    loadQuotes();
  });
  loadQuotes();  //call it once on load
});

我还将 $(this).is(':checked') 更改为 this.checked在上面，不需要让它变慢，DOM 属性在这里起作用:)