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

标签 javascript jquery html optimization dry

我使用 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');

有什么建议吗?

最佳答案

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

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));

关于javascript - 如何优化我的 Jquery 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20400078/

相关文章:

php - 使用 jquery 的 .error() 进行多次 PHP 数据库更新

javascript - 使用 jquery 删除表行

jquery 如何在调整大小时刷新页面?

javascript - 屏幕阅读器无法读取 Firefox 中的 Aria-Live

javascript - JSON 到 HTML 表 JavaScript 不工作

javascript - 如何模仿 GChat 的可滚动区域?

javascript - 如何在<a>标签上同时使用href和onclick?

html - Flexbox 为缩放后的 svg 图片保留空间

javascript - CELL 中的 bootstrap 3 center div

javascript - 找不到模块 : Error: Can't resolve '@angular/material' when building dist for npm package