최적화 된 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 코드입니다 : 내가 페이지에 다른 곳에서 위의 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> 

문제는 같은 ... 그 자체를 선물한다 이 :

<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> 

내가 사용하여 제대로하고 있다고 생각

"이"그래서 스크립트가 항문에 보일 것이다 "이"컨테이너와 짝을 지어 라.

Answer 1

HTML을 보면 내게 문제가되는 코드 일 수 있습니다. 일반적으로 href의 속성은 <a></a>의 고유 한 ID로 탐색하는 데 사용됩니다. 이제 html 요소의 id 속성은 고유해야합니다. 앵커 태그는 다른 앵커로 이동할 필요가 없습니다. 고유 한 id 요소로 이동할 수 있습니다. 동일한 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> 

참조 설명서를 참조하십시오.