優化的jQuery

Question

我有一點我想幫助優化的jQuery。

但是，腳本工作正常，如果我有多個div想要使用腳本，然後他們會感到困惑。

這裏是jQuery的

jQuery(document).ready(function() { 
     jQuery(".anchorLink").anchorAnimate() 
    }); 

    jQuery.fn.anchorAnimate = function(settings) { 
     settings = jQuery.extend({ 
      speed : 400 
     }, settings); 

     return this.each(function(){ 
      var caller = this 
      jQuery(caller).click(function (event) { 
       event.preventDefault() 
       var locationHref = window.location.href 
       var elementClick = jQuery(caller).attr("href") 

       var destination = jQuery(elementClick).offset().top; 
       jQuery("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() { 
        window.location.hash = elementClick 
       }); 
       return false; 
      }) 
     }) 
    } 

這裏是典型的html代碼：

<div id="container1"> 
<ul class="Questions"> 
<li class="anchorLink" href="#myAnchor"> 
<a class="faq-topic-link anchorLink" href="#myAnchor"> 
<span class="topic_ questionTitle">FAQ Question</span> 
</a> 
</li> 
</ul> 


<ul class="aAnswers"> 
<li class="li_answers"> 
<a name="myAnchor" id="myAnchor"></a> 
<span class="topic-head" id="topics_">FAQ Question</span> 
Lorim Ipsum ... 
<div class="back-to-top"> 
<a href="#faqtop" class="anchorLink">Back To Top</a></div> 
<div class="clear"></div> 
</li> 
</ul> 
</div> 

的問題提出了自己，當我嘗試到頁面上的其他地方使用上面的html代碼......像這個：

<div id="container2"> 
    <ul class="Questions"> 
    <li class="anchorLink" href="#myAnchor"> 
    <a class="faq-topic-link anchorLink" href="#myAnchor"> 
    <span class="topic_ questionTitle">FAQ Question</span> 
    </a> 
    </li> 
    </ul> 


    <ul class="aAnswers"> 
    <li class="li_answers"> 
    <a name="myAnchor" id="myAnchor"></a> 
    <span class="topic-head" id="topics_">FAQ Question</span> 
    Lorim Ipsum ... 
    <div class="back-to-top"> 
    <a href="#faqtop" class="anchorLink">Back To Top</a></div> 
    <div class="clear"></div> 
    </li> 
    </ul> 
    </div> 

我以爲我正在通過使用「this」正確地做到這一點，所以腳本會看ani隊友「這個」容器。

Answer 1

從看你的html看起來像這可能是導致你的問題的代碼。 <a></a>標籤中的href屬性通常用於導航到唯一標識。現在HTML元素上的id屬性應該是唯一的。應該注意的是，錨標籤不必導航到另一個錨。他們可以導航到任何唯一id'd元素。雖然如果有兩個具有相同ID的元素，那麼導航將轉到DOM中的第一個匹配的ID。

從給定的html中，兩個定位標記都具有相同的ID。如果你讓這些ID獨特，那麼我認爲你會看到你想要的結果。也許是這樣的：對於id屬性here和錨標記here

<a name="myAnchor" id="myAnchor" href="#navigateFromFirstAnchor">Go to First Div</a> 
<div id="navigateFromFirstAnchor"></div> 

<a name="mySecondAnchor" id="mySecondAnchor" href="#navigateFromSecondAnchor">Go To Second Div</a> 
<div id="navigateFromSecondAnchor"></div> 

查看文檔。