javascript - 如何优化我的 Jquery 代码？

Question

我使用 Jquery 创建了一些 JavaScript，用于页面动画:

我尝试优化它，因为我对 subtab1、subtab2、subtab3 重复相同的操作。

对所有这些都执行相同的函数，唯一的变化是变量 i 迭代？

有什么建议吗？

<script type="text/javascript">
  $(document).ready(function () {

    var $defensivo = $('#defensivoimg');
    var $equilibrado = $('#equilibradoimg');
    var $activo = $('#activoimg');

    var $defensivoSubTab = $('#subtab1');
    var $equilibradoSubTab = $('#subtab2');
    var $activoSubTab = $('#subtab3');

    var $fundosdiponiveis = $('#fundosdiponiveis');
    var $fundosdiponiveisTab = $('#tabs1');

    $defensivo.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $defensivoSubTab.removeClass("hide");
      $defensivoSubTab.show();
    });

    $equilibrado.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $equilibradoSubTab.removeClass("hide");
      $equilibradoSubTab.show();
    });

    $activo.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $activoSubTab.removeClass("hide");
      $activoSubTab.show();
    });
  });
</script>

暂时:

var $fundosdiponiveis = $('#fundosdiponiveis');

这是我的默认 div。

var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');

当我单击以下选项卡之一时，会出现该 div:

var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');

点击后，该按钮会隐藏我的三个 #subtab 中的“显示”样式，并将其更改为无

var $fundosdiponiveisTab = $('#tabs1');

有什么建议吗？

Answer 1

您可以编写一个返回正确函数的函数:

function createShowTabFunc(tab) {
  return function () {
    $fundosdiponiveis.removeClass("subshow show").addClass("hide");
    tab.removeClass("hide");
    tab.show();
  }
}

然后分配您的点击处理程序:

$defensivo.live('click', createShowTabFunc($defensivoSubTab));
$equilibrado.live('click', createShowTabFunc($equilibradoSubTab));
$activo.live('click', createShowTabFunc($activoSubTab));