绑定以单击时重用代码

问题描述

| 给定以下内容：

  $(document).ready(function() {

    $(\'a.went-cold-turkey\').click(function() {
      $(\"body\").css(\"cursor\",\"progress\");
      var activity_day = this.rel;
      $.ajax({
          url: this.href,type: \"GET\",cache: false,success: function (html) {
            $(\'#\'+activity_day).replaceWith(html);
            $(\"body\").css(\"cursor\",\"auto\");
          }
      });
      return false;
    });

    $(\'a.did-it-once\').click(function() {
      $(\"body\").css(\"cursor\",\"auto\");
          }
      });
      return false;
    });

  });

如您所见，两个“ .click \”调用实际上是相同的。如何在两者中共享重复代码以保持干燥？     

解决方法

你可以 与功能绑定

function functionName(){}
$(\"selector1\").click(functionName)
$(\"selector2\").click(functionName)

或与两个选择器同时绑定

$(\"selector1,selector2\").click(function(){});

    ,您可以像这样将多个选择器传递给jQuery的$ functin：

$(\'a.went-cold-turkey,a.did-it-once\').click(function () {});

另外，您可以将重复代码放入命名函数中，并将其作为处理程序传递：

function handleEvent() {
    // Your code here
}

$(\'a.went-cold-turkey\').click(handleEvent);

    ,编辑：虽然在第二，只是这样做：

$(document).ready(function() {

    $(\'a.went-cold-turkey,a.did-it-once\').click(function() {
      $(\"body\").css(\"cursor\",\"progress\");
      var activity_day = this.rel;
      $.ajax({
          url: this.href,type: \"GET\",cache: false,success: function (html) {
            $(\'#\'+activity_day).replaceWith(html);
            $(\"body\").css(\"cursor\",\"auto\");
          }
      });
      return false;
    });

  });

    ,假设这两个A元素位于父类“ choices \”中。

$(\'.choices a\').click(function() {
  $(\"body\").css(\"cursor\",\"progress\");
  var activity_day = this.rel;
  $.ajax({
      url: this.href,success: function (html) {
        $(\'#\'+activity_day).replaceWith(html);
        $(\"body\").css(\"cursor\",\"auto\");
      }
  });
  return false;
});

    ,这应该大约是您要查找的内容：

$(document).ready(function() {
var common = function(rel,href) {
    $(\"body\").css(\"cursor\",\"progress\");
    var activity_day = rel;
    $.ajax({
        url: thref,\"auto\");
        }
    });
    return false;
}
$(\'a.went-cold-turkey\').click(function() {
    return common(this.rel,this.href);
});

$(\'a.did-it-once\').click(function() {
    return common(this.rel,this.href);
});
});

    ,将代码放入函数中，然后将相同的单击处理程序添加到两个元素中。

$(function(){

   function clickFn(){

     $(\"body\").css(\"cursor\",\"progress\");
     var activity_day = this.rel;
     $.ajax({
       url: this.href,\"auto\");
       }
     });
     return false;

   }

   $(\'a.went-cold-turkey,a.did-it-once\').click( clickFn );

});

    ,http://api.jquery.com/multiple-selector/

$(\'a.went-cold-turkey,a.did-it-once\').click(function() {
  $(\"body\").css(\"cursor\",\"auto\");
      }
  });
  return false;
});

    ,因此：

function linkClick() {
  $(\"body\").css(\"cursor\",\"auto\");
      }
  });
  return false;
}

$(document).ready(function(){
  $(\'a.went-cold-turkey,a.did-it-once\').click(linkClick);
});

    ,将两个选择器都放在函数中：

  $(document).ready(function() {

    $(\'a.went-cold-turkey,\"auto\");
          }
      });
      return false;
    });


  });