使用 for 循环创建分页 jquery

Question

好的，这是我的问题。我正在使用特定的加载函数，我需要为分页创建 for 循环，以便动态加载内容而不是重复代码块。

 $('.teoBtn_1').click(function() {
    hideAll();
    $('#contentorTopico').load(unidadeSessao + "_t1" + '.html', function(){
        $('#contentorTopico').show();
        $('.nome_topico').text(topicoName);
        });
});

    $('.teoBtn_2').click(function() {
    hideAll();
    $('#contentorTopico').load(unidadeSessao + "_t2" + '.html', function(){
        $('#contentorTopico').show();
        $('.nome_topico').text(topicoName);
        });
});

    $('.teoBtn_3').click(function() {
    hideAll();
    $('#contentorTopico').load(unidadeSessao + "_t3" + '.html', function(){
        $('#contentorTopico').show();
        $('.nome_topico').text(topicoName);
        });
});

    $('.teoBtn_4').click(function() {
    hideAll();
    $('#contentorTopico').load(unidadeSessao + "_t4" + '.html', function(){
        $('#contentorTopico').show();
        $('.nome_topico').text(topicoName);
        });
});

    $('.praBtn_1').click(function() {
    hideAll();
    $('#contentorTopico').load(unidadeSessao + "_t5" + '.html', function(){
        $('#contentorTopico').show();
        $('.nome_topico').text(topicoName);
        });
});

        $('.praBtn_2').click(function() {
    hideAll();
    $('#contentorTopico').load(unidadeSessao + "_t6" + '.html', function(){
        $('#contentorTopico').show();
        $('.nome_topico').text(topicoName);
        });
});


        $('.praBtn_3').click(function() {
    hideAll();
    $('#contentorTopico').load(unidadeSessao + "_t7" + '.html', function(){
        $('#contentorTopico').show();
        $('.nome_topico').text(topicoName);
        });
});

我重复点击 teoButton_1 2 和 3 等的所有动作...以加载 _t1、_t2 和 _t3，我如何将其转换为 for 循环而无需每次指定 1 2 或 3 个数字？ 有人可以帮忙吗？

我的分页HTML：

 <div class="pagination">
     <a class="at teoBtn_1" href="#">1</a>
     <a class="at teoBtn_2" href="#">2</a>
     <a class="at teoBtn_3" href="#">3</a>
     <a class="at teoBtn_4" href="#">4</a>
     <a class="ap teoBtn_5" href="#">5</a>
     <a class="ap teoBtn_6" href="#">6</a>
     <a class="ap teoBtn_7" href="#">7</a>
  </div>

Answer 1

嗯，真的很简单，只需要在纯javascript中使用：

for (i = 0; i < 7; i++) { // will loop 7 times
$('.teoBtn_' + i).click(function() {
    hideAll();
    $('#contentorTopico').load(unidadeSessao + "_t" + i + '.html', function(){
        $('#contentorTopico').show();
        $('.nome_topico').text(topicoName);
        });
});
}