Question

鉴于以下内容：

  $(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", "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;
    });

  });

正如您所看到的，“。click”调用几乎完全相同。如何在两者中共享重复代码以保持干燥？

Answer 1

您可以将多个选择器传递给jQuery $函数，如下所示：

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

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

function handleEvent() {
    // Your code here
}

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

Answer 2

你可以

与功能绑定

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

或者在同一搜索中与两个选择器绑定

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

Answer 3

编辑：虽然在第二天，但是这样做：

$(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;
    });

  });

Answer 4

假设这两个A元素在父元素中，类为“choices”。

$('.choices a').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;
});

Answer 5

这应该与您正在寻找的大致相同：

$(document).ready(function() {
var common = function(rel, href) {
    $("body").css("cursor", "progress");
    var activity_day = rel;
    $.ajax({
        url: thref,
        type: "GET",
        cache: false,
        success: function (html) {
            $('#'+activity_day).replaceWith(html);
            $("body").css("cursor", "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);
});
});

Answer 6

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

$(function(){

   function clickFn(){

     $("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.went-cold-turkey, a.did-it-once').click( clickFn );

});

Answer 7

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

$('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;
});

Answer 8

这样：

function linkClick() {
  $("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;
}

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

Answer 9

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

  $(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;
    });


  });

绑定到click时重用代码

9 个答案: