简化jQuery/Javascript代码

我一直在尝试使用“$（输入[数据代码]”）来简化我的代码。每个”函数都是为了简化代码。当用户单击锚链接时，代码只是在处理，它会将其动画化到该点，它看起来像：

$('a.welcome').click(function(){
    $('html, body').animate({scrollTop:0}, 2000, function() {
        parallaxScroll(); 
    });
    return false;
});

$('a.step1').click(function(){
    $('html, body').animate({scrollTop: $('#step1').offset().top - 70}, 2000, function() {
        parallaxScroll(); 
    });
    return false;
});

$('a.step2').click(function(){
    $('html, body').animate({scrollTop: $('#step2').offset().top - 70}, 2000, function() {
        parallaxScroll(); 
    });
    return false;
});

$('a.step3').click(function(){
    $('html, body').animate({
        scrollTop: $('#step3').offset().top - 70
    }, 2000, function() {
        parallaxScroll(); 
    });
    return false;
});

到目前为止，我提出的简化方法如下：

$("input[data-code]").each(function() {
    $(this).click(function(){
        $('html, body').animate({
            scrollTop: $($(this).data("code")).offset().top - 70
        }, 2000, function() {
            parallaxScroll(); 
        });
        return false;
    });
}); 

但它似乎不起作用：（

我的理论是，

$（this）.click（function（）{

实际上没有正确调用样式

$（a.welcome.）中的元素。click（function（）{

链接的实际HTML如下所示：

<nav id="primary">
    <ul>
        <li>
            <h1>Welcome</h1>
            <a class="welcome" href="#welcome" data-code="0">View</a>
        </li>
        <li>
            <h1>Step 1: Setup</h1>
            <a class="step1" href="#step1" data-code="#step1">Step 1</a>
        </li>
        <li>
            <h1>Step 2: Data Management</h1>
            <a class="step2" href="#step2" data-code="#step2">Step 2</a>
        </li>
        <li>
            <h1>Step 3: Configure Cameras</h1>
            <a class="step3" href="#step3" data-code="#step3">View</a>
        </li>
    </ul>
</nav>

欢迎


步骤1：设置


步骤2：数据管理


步骤3：配置摄像头

---

有什么想法吗？

你可以在点击功能中使用这个

$('#primary a').on('click', function () {
    var offSet = $($(this).data('code')).offset().top - 70;
    if ($(this).is('.welcome')) {
        offSet = 0;
    }
    $('html, body').animate({
        scrollTop: offSet
    }, 2000,

    function () {
        parallaxScroll();
    });
    return false;
});

简单的

$('#scroll a').click(function(){
    $('html, body').animate({scrollTop: $(this).offset().top - 70}, 2000, 
    function() {
        parallaxScroll(); 
    });
    return false;
});

并将

id=“scroll”

添加到

ul

<nav id="primary">
        <ul id = "scroll">
            <li>
                <h1>Welcome</h1>
                <a class="welcome" href="#welcome" data-code="0">View</a>
            </li>
            <li>
                <h1>Step 1: Setup</h1>
                <a class="step1" href="#step1" data-code="#step1">Step 1</a>
            </li>
            <li>
                <h1>Step 2: Data Management</h1>
                <a class="step2" href="#step2" data-code="#step2">Step 2</a>
            </li>
            <li>
                <h1>Step 3: Configure Cameras</h1>
                <a class="step3" href="#step3" data-code="#step3">View</a>
            </li>
        </ul>
</nav>

欢迎


步骤1：设置


步骤2：数据管理


步骤3：配置摄像头

---

可以。jQuery代码的目标是HTML输入标记，而不是锚定标记

$("a[data-code]").click(function(){
    var val = $(this).data("code") ? $($(this).data("code")).offset().top - 70 : 0;
    $('html, body').animate({
        scrollTop: val
    }, 2000, function() {
        parallaxScroll(); 
    });
return false;
});

更改：

$("input[data-code]").each(function() {

致：

---

我想我会这样做。 您希望以锚定标记为目标

$("a[data-code]").click(function(){
    var val = $(this).data("code") ? $($(this).data("code")).offset().top - 70 : 0;
    $('html, body').animate({
        scrollTop: val
    }, 2000, function() {
        parallaxScroll(); 
    });
return false;
});

---

您不需要

each（）

；

click（）

已经为每个元素添加了一个处理程序。我可能遗漏了一些东西，但为什么在使用锚元素时，您的选择器在元素输入上？减少明显复杂性的一件事是替换所有

函数（）{parallaxScroll（）；}

仅使用视差croll