簡化jQuery/Javascript代碼

我一直在嘗試使用'$（input [data-code]「）。'each'函數來簡化我的代碼，以簡化代碼。錨鏈接，它動畫下來到現場，它看起來像：簡化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>

任何想法？

來源

2013-10-16 Ian Ryan Clarke

你不需要'each（）'; 'click（）'已經爲每個元素添加了一個處理程序。 – SLaks

我可能會遺漏一些東西，但是當你使用錨元素時，爲什麼你的元素輸入選擇器？ – qternion

減少表面複雜度的一件事就是用'parallaxScroll'替換所有'function（）{parallaxScroll（）;}' –

我不喜歡這樣，我想。您想要定位定位標記。

$("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; 
});

來源

2013-10-16 14:03:57 qternion

你可以在點擊功能

$('#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; 
});

來源

2013-10-16 13:54:58 Anton

簡單

$('#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>

會工作。

來源

2013-10-16 13:59:46

你的jQuery代碼是針對HTML輸入標籤而不是錨標籤。

變化：

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

到：

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

來源

2013-10-16 14:02:46

簡化jQuery/Javascript代碼

回答

相關問題