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”）。单击（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

将它分开：

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 3

你必须重新运行所有这些表明你可能有更大的代码结构问题（没有看到你的其余代码就无法分辨）。您可能想要重新访问代码的流程/结构。

此外，您已经将所有代码放入函数中 - 注意函数（）。您可以使用该功能块，将其放在别处，命名，然后将名称传递给click（）。

此外，为了更有效（更少查找），请转

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

到

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

Answer 4

DOM中的Javascript主要是基于事件的编程。所以想想一个基于事件的程序员，并且......用事件来做吧！

此外，我冒昧地为你的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' );
}

Answer 5

受到David Andres和ravidgemole的极大启发：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);
});;

如何在一个我可以使用click事件调用的函数中存储一堆jquery命令

5 个答案: