Question

我基本上编写了一个脚本，将窗口设置为选定元素的动画，但我发现自己每次为这个链接写了5次。

e.g：这是HTML（只是标准导航）

<nav>
  <a class="nav_link1"></a>
  <a class="nav_link2"></a>
  <a class="nav_link3"></a>
</nav>




$('.nav_link1').click(function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop: $('#section_link1').offset().top}, 300);
})
$('.nav_link2').click(function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop: $('#section_link2').offset().top}, 300);
})
$('.nav_link3').click(function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop: $('#section_link3').offset().top}, 300);
})

我想知道如何使用已定义的数组（每个）将其合并为一个块。

可以这样做吗？

var linkitem = ['link1','link2','link3']
$('.nav_linkitem').click(function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop: $('#section_linkitem').offset().top}, 300);
})

Answer 1

尝试使用逗号分隔的选择器和“this”关键字。

$("body").on("click", "#section_link1,#section_link2,#section_link3", function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop: $(this).offset().top}, 300);
});

或者为所有这些创建一个通用的css类，只需使用$（“。myLinkClass”）一次性找到它们。

$("body").on("click", ".myLinkClass", function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop: $(this).offset().top}, 300);
});

Answer 2

您可以使用原生javascript的for循环：

var linkitems = ['link1','link2','link3']

for (i = 0; i < linkitems.length; i++) {
    $('.nav_'+linkitems[i]).click(function(event){
        event.preventDefault();
        $('html, body').animate({scrollTop: $('#section_'+linkitems[i]).offset().top}, 300);
    })
}

在一次调用中将jQuery事件附加到多个选择器

2 个答案: