Оптимизированный JQuery - PullRequest
Новая
       18

Оптимизированный JQuery

1 голос
/ 15 ноября 2011

У меня есть немного 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», чтобы скрипт выглядел для анимации «this» контейнера.

1 Ответ

0 голосов
/ 03 февраля 2012

При просмотре вашего html похоже, что это может быть код, который вызывает у вас проблемы.Обычно href свойства в тегах <a></a> используются для перехода к уникальному идентификатору.Теперь свойство id в HTML-элементах должно быть уникальным.Следует отметить, что теги привязки не должны перемещаться к другой привязке.Они могут перемещаться к любому уникально идентифицированному элементу.Хотя, если есть два элемента с одинаковым идентификатором, то навигация перейдет к первому соответствующему идентификатору в DOM.

Из данного html оба тега привязки имеют одинаковый идентификатор.Если вы сделаете эти идентификаторы уникальными, то, я думаю, вы увидите желаемый результат.Может быть что-то вроде: 

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

См. Документацию для атрибута id здесь и тега привязки здесь .

...