javascript - 使用 jquery 'this' 压缩代码

Question

我尽量不问问题，但我想不出什么应该很容易。我正在建立一个练习网站 briannabaldwinphotography.com。我只是想压缩这个，这样我就可以点击一个 anchor ，它就会平滑地滚动到 <section>。具有与 anchor 同名的 id。例如:'about' li anchor 的 href 为 #section_three并将滚动到 <section> ID 为 section_three .我尝试了 10 种不同的变体，但它对我不起作用。我正在寻找的是 $(this).attr("href").offest().top} ....ETC。这是我要压缩的代码。谢谢。

$(function() {
    $("[href='#section_three']").on("click", function() {
        $("html body").animate({"scrollTop":$("#section_three").offset().top}, 1000);
        return false;

    });
    $("[href='#section_two']").on("click", function() {
        $("html body").animate({"scrollTop":$("#section_two").offset().top}, 1000);
        return false;


    });
    $("[href='#section_four']").on("click", function() {
        $("html body").animate({"scrollTop":$("#section_four").offset().top}, 1000);
        return false;


    });
    $("[href='#section_one']").on("click", function() {
        $("html body").animate({"scrollTop":$("#section_one").offset().top}, 1000);
        return false;


    });

});

Answer 1

如果您使用 attribute starts with selector (^=)您可以获得所有具有以 "#section_" 开头的 href 的元素，将处理程序绑定(bind)到这些元素，然后在处理程序中使用 this.href 获取特定的 href被点击的元素:

$(function() {
    $("[href^='#section_']").on("click", function() {
        $("html body").animate({"scrollTop" : $(this.href).offset().top}, 1000);
        return false;
    });
});

请注意 this.href 与 $(this).attr("href") 的作用相同，但效率更高:无需创建 jQuery 对象访问您可以直接访问的元素的属性。