要将jQuery代码分解为函数,您是否以与JavaScript相同的方式执行此操作？

Question

我一直在写一些jQuery函数,里面有JavaScript变量和循环等等 - 它们变得很长而且很难读.如果我想打破它们,我该怎么做？

    $(".x").click(function ()
    {
      var i=0;
      for (i=0;i<50;i++)
      {
        if ($("#x"+i).is(':hidden'))
        {
          $("#x"+i).show();
        }
        else
        {
          $("#x"+i).hide();
        }
      }
    });

例如,在上面的代码中,如果我想将循环的内容移动到一个单独的函数,然后从循环内部调用该函数,那需要看起来像什么？

Answer 1

jQuery是JavaScript,所以你可以像往常一样传递函数.

// First refactor - separate the function out
$(".x").click(myfunc);

function myfunc() {
{
  var i=0;
  for (i=0;i<50;i++)
  {
    if ($("#x"+i).is(':hidden'))
    {
      $("#x"+i).show();
    }
    else
    {
      $("#x"+i).hide();
    }
  }
}

虽然查看你的代码,但是所有x1到x50元素的尖叫都是应用于它的相同类.像这样......

<div id='x1' class='xClass'></div>
<div id='x2' class='xClass'></div>
<div id='x3' class='xClass'></div>
.....
<div id='x50' class='xClass'></div>

然后你可以做类似的事情

var currentHidden = $('.xClass:hidden')
var currentVisible = $('.xClass:visible')
currentHidden.show();
currentVisible.show();

是的,切换更好:

$('.xClass').toggle();

然后你不必循环,这是使用jQuery的美丽之一!=)