Как я могу сохранить кучу команд jquery в функции, которую я могу вызвать с помощью события click

Question

В настоящее время у меня есть это:

$(".splitCol").click(function () { 
          $.cookie('whichColumn', 'split'); 
          $(".threeCol .active").removeClass("active"); 
          $(".leftCol .active").removeClass("active"); 
          $(".splitCol span").addClass("active"); 

          $(".threeColumns li:eq(3)").removeClass("first");
          $(".threeColumns li:eq(6)").removeClass("first");

          $(".entries").removeClass("threeColumns");
          $(".entries").removeClass("leftColumn");
          $(".entries").addClass("splitColumns"); 

          $(".splitColumns li:eq(2)").addClass("first");
          $(".splitColumns li:eq(4)").addClass("first");
          $(".splitColumns li:eq(6)").addClass("first");
          $(".splitColumns li:eq(8)").css("display", "none");
     });

И мне нужно повторить все эти команды еще раз после того, как я выполню проверку if. Как я могу взять все это и добавить их в одну функцию, чтобы, если вы $ (". SplitCol"). Click (function () {, тогда он запускает функцию. И затем также, если оператор IF удовлетворен, он запускается как хорошо?

Answer 1

Вы можете извлечь текущую анонимную функцию обратного вызова в обычную функцию:

В привязке события клика:

$(".splitCol").click(function () {
  originalFunction();

  // The if statement you talk about...
  if (condition) {
    originalFunction();
  }
  //...
});


// extracted function
function originalFunction() { // please change the function name
  $.cookie('whichColumn', 'split'); 
  $(".threeCol .active").removeClass("active"); 
  $(".leftCol .active").removeClass("active"); 
  $(".splitCol span").addClass("active"); 

  $(".threeColumns li:eq(3)").removeClass("first");
  $(".threeColumns li:eq(6)").removeClass("first");

  $(".entries").removeClass("threeColumns");
  $(".entries").removeClass("leftColumn");
  $(".entries").addClass("splitColumns"); 

  $(".splitColumns li:eq(2)").addClass("first");
  $(".splitColumns li:eq(4)").addClass("first");
  $(".splitColumns li:eq(6)").addClass("first");
  $(".splitColumns li:eq(8)").css("display", "none");
}

Примечание: Если ваша извлеченная функция использует ключевое слово this, например, чтобы получить ссылку на элемент, вызвавший событие click, вы должны вызвать его в другом способ сохранения контекста:

// in your click callback:
originalFunction.call(this); // preserve the context

Answer 2

То, что вам нужно перезапустить все, что говорит о том, что у вас может быть проблема с более крупной структурой кода (не могу сказать, не увидев остальную часть вашего кода). Возможно, вы захотите вернуться к потоку / структуре вашего кода.

Кроме того, вы уже поместили весь этот код в функцию - обратите внимание на функцию (). Вы можете взять этот функциональный блок, поместить его в другое место, назвать его, а затем передать имя функции click ().

Кроме того, для более эффективного (меньше поисков) хода

$(".entries").removeClass("threeColumns");
$(".entries").removeClass("leftColumn");
$(".entries").addClass("splitColumns"); 

в

$(".entries").removeClass("threeColumns").removeClass("leftColumn").addClass("splitColumns");

Answer 3

Отделите это так:

function clickHandler()
{
  $.cookie('whichColumn', 'split');
  $(".threeCol .active").removeClass("active");
  $(".leftCol .active").removeClass("active");
  $(".splitCol span").addClass("active");
  $(".threeColumns li:eq(3)").removeClass("first");
  $(".threeColumns li:eq(6)").removeClass("first");
  $(".entries").removeClass("threeColumns");
  $(".entries").removeClass("leftColumn");
  $(".entries").addClass("splitColumns");
  $(".splitColumns li:eq(2)").addClass("first");
  $(".splitColumns li:eq(4)").addClass("first");
  $(".splitColumns li:eq(6)").addClass("first");
  $(".splitColumns li:eq(8)").css("display", "none")
}

$(".splitCol").click(clickHandler);

Вы можете использовать любую анонимную функцию в качестве вашего обработчика событий. Помните, что ключевое слово this при использовании в такой функции будет ссылаться на элемент DOM, по которому щелкают.

Answer 4

Вдохновлен Дэвидом Андресом и Равидгемоль : D

var clickHandler = function(statement) {
  $.cookie('whichColumn', 'split');
  $(".threeCol, .leftCol").find(".active").removeClass("active");
  $(".splitCol span").addClass("active");
  $(".threeColumns").find("li:(6), li:eq(3)").removeClass("first");
  $(".entries").removeClass("threeColumns leftColumn").addClass("splitColumns");
  $(".splitColumns").find("li:nth-child(8-2n)").addClass("first")
        .end().find('li:eq(8)').hide();
  if (statement) {
    clickHandler(false);
  }      
};
// statement = ( 15 == 16 );
$(".splitCol").click(function(){
  clickHandler(statement);
});;

Answer 5

Javascript в DOM в значительной степени основан на событиях. Так что думайте как программист, основанный на событиях, и ... делайте это с событиями!

Кроме того, я позволил себе применить некоторые меры по повышению эффективности к вашему jQuery

$(".splitCol")
  .bind( 'your-custom-event-name', (function ()
  { 
    $.cookie('whichColumn', 'split');

    $(".threeCol, .leftCol")
    .find(".active")
    .removeClass("active");

    $(".splitCol span")
      .addClass("active");

    $(".threeColumns")
      .find("li:eq(3), li:eq(6)")
      .removeClass("first");

    $(".entries")
      .removeClass("threeColumns leftColumn")
      .addClass("splitColumns");

    $( ".splitColumns" )
      .find("i:even:not(li:eq(0),li:eq(8))")
      .addClass("first")
      .end()
      .find( "li:eq(8)" )
      .css("display", "none");
  } )
  .click( function()
  {
    $(this).trigger( 'your-custom-event-name' );
  } );

И затем вы можете запустить это пользовательское событие из любого места

if ( /* whatever */ )
{
  $(".splitCol").trigger( 'your-custom-event-name' );
}