Блог

Учитывая следующее:

   $(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» практически идентичны. Как я могу поделиться повторяющимся кодом в обоих, чтобы все оставалось СУХИМ?

Вы можете передать несколько селекторов в $ functin jQuery следующим образом:

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

В качестве альтернативы, вы могли бы поместить свой повторяющийся код в именованную функцию и передать ее в качестве обработчика:

 function handleEvent() {
    // Your code here
}

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

Вы можете либо

Привязка с помощью функции

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

Или привязка с обоими селекторами при одном поиске

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

РЕДАКТИРОВАТЬ: на 2-м этапе просто сделайте это:

 $(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,
      type: "GET",
      cache: false,
      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,
        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);
});
});
  

Поместите код в функцию, а затем просто добавьте один и тот же обработчик щелчка к обоим элементам.

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

});
  

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

Поскольку это:

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

Поместите оба селектора в функцию:

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


  });