避免在jQuery中重复功能

时间:2010-08-16 18:13:48

标签: jquery duplication

此函数被写入两次以保存复选框状态以及相应的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');

                        });      
                });
            });

1 个答案:

答案 0 :(得分:2)

您可以将其声明为命名函数并将其调用两次,如下所示:

$(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属性在这里工作:)