Question

我使用Jquery为页面动画创建了一些JavaScript：

我尝试优化它，因为我对subtab1，subtab2，subtab3重复相同的事情。

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

有什么建议吗？

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

当我点击以下其中一个标签时，这会划分apears：

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

该按钮隐藏并将“我的三个子标签”中的“显示”样式更改为无，单击，

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

有什么建议吗？

Answer 1

对所有选项卡都有一个公共类属性，你只需要编写$（'。class'）。click（）并在此获取相应选项卡的id，并根据attr函数提取的id，你可以使用if else在if else中定义变量并执行代码块。

Answer 2

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

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

我如何优化我的Jquery代码？

2 个答案: