javascript - 重构jQuery以影响N个 anchor 和div对的数量

我有一些未知的链接和div，它们是根据点击隐藏和显示的。我知道必须有一个更好的方法来执行此操作-重构我的代码以包含数字部分，并将它们从01循环到N。

虽然下面的示例有4对锚标记和div，但数量可能在1到100之间（或更多）

HTML标记：

<a class="bioImg bioImg01"></a>
<a class="bioImg bioImg02"></a>
<a class="bioImg bioImg03"></a>

<div class="bioContainer bioContainer01">
</div>

<div class="bioContainer bioContainer02">
</div>

<div class="bioContainer bioContainer03">
</div>

<a class="bioImg bioImg04"></a>

<div class="bioContainer bioContainer04"></div>

JavaScript（jQuery）：
我知道这是效率低下的部分-只是没有经验和词汇才能正确地做到这一点

// Click events for Bio page
    if ($('.bioImg').length > 0) {
        $('.bioImg').click(function() {
            $('.bioImg').removeClass('active');
            $(this).addClass('active');
        });
    }

if ($('.bioContainer').length > 0) {
    $('.bioImg01').click(function() {
        $('.bioContainer').hide();
        $('.bioContainer01').fadeToggle();
    });
}

if ($('.bioContainer').length > 0) {
    $('.bioImg02').click(function() {
        $('.bioContainer').hide();
        $('.bioContainer02').fadeToggle();
    });
}

if ($('.bioContainer').length > 0) {
    $('.bioImg03').click(function() {
        $('.bioContainer').hide();
        $('.bioContainer03').fadeToggle();
    });
}

if ($('.bioContainer').length > 0) {
    $('.bioImg04').click(function() {
        $('.bioContainer').hide();
        $('.bioContainer04').fadeToggle();
    });
}

最佳答案

您可以使用索引将这些组匹配在一起。除非您有特殊的CSS，否则很少需要为一组相同类型元素中的每个名称使用唯一的类名

var $bioImg = $('.bioImg').click(function() {
  // get index of current bioImg within collection
  var index = $bioImg.index(this);
  $bioImg.removeClass('active');
  $(this).addClass('active');
  // hide all containers and fade in matching indexed one
  $('.bioContainer').hide().eq(index).fadeIn();
});