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的美女之一！ =）

Answer 2

jQuery函数和JavaScript函数之间的区别是不存在的，因为jQuery确实是JavaScript。

$(".x").click(DoTheThingYouDo);

function DoTheThingYouDo()
{
  var i=0;
  for (i=0;i<50;i++)
  {
      $("#x"+i).toggle();
  }
}

您可以使用toggle()调用来显示和隐藏......您理论上也可以使用CSS类，只需切换具有该类的所有DOM元素：

$(".x").click(DoTheThingYouDo);

function DoTheThingYouDo()
{
   $(".myclass").toggle();
}

Answer 3

没有“jQuery函数”这样的东西，jQuery代码通常只使用匿名的JavaScript函数。

将循环的内容移动到命名函数中将如下所示：

$(".x").click( function() {
  for (var i=0; i<50; i++) toggleItem(i)
});

function toggleItem(i) {
  if ($("#x"+i).is(':hidden')) {
    $("#x"+i).show();
  } else {
    $("#x"+i).hide();
  }
}

但是，您可以使用CSS的级联属性来使用简单的JavaScript语句切换所有项目，而不是循环遍历所有元素。例如：

CSS：

<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>

HTML：

<div class="StateOne" id="StateContainer">
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
</div>

JavaScript的：

$('.x').click(function() {
   var s = document.getElementById('StateContainer');
   s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});

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

3 个答案: