jQuery для перемещения поля рядом с текущей целевой позицией привязки

На этой странице > http://canvas.clickbump.com/example/

У меня есть плавающее поле «Оглавление», в котором есть гиперссылки, указывающие на пару скрытых элементов привязки на странице:

<a id="anchor1">This is anchor 1</a>

А также

<a id="anchor2">This is anchor 2</a>

Разметка коробки:

<details class="cb-toc" open="open">
    <summary>Table of Contents</summary>
    <ol>
        <li><a href="#top">GoTo Top</a></li>
        <li><a href="#anchor1">GoTo Anchor 1</a></li>
        <li><a href="#anchor2">GoTo Anchor 2</a></li>
    </ol>
</details>

Я пытаюсь использовать приведенный ниже сценарий jQuery, чтобы связать клики по ссылкам TOC, чтобы он перемещал плавающее поле в положение, примыкающее к целевому якорю. Тем не менее, его хит или промах. Требуется два щелчка по якорю, чтобы переместить коробку в нужное положение.

Вот jQuery, который я использую:

jQuery('.cb-toc a').on('click',foo);
function foo(){
    jQuery('a:target').after(jQuery('.cb-toc'));
}

Любые идеи, что можно сделать, чтобы заставить его перемещать поле в нужное положение при первом щелчке каждый раз?


jquery anchor dom-traversal
person Scott B    schedule 25.01.2013    source источник
comment
Похоже, ваша страница перезагружается, когда вы нажимаете на ссылку.   -  person kapa    schedule 25.01.2013
comment
Просто исправил это. Спасибо за внимание.   -  person Scott B    schedule 25.01.2013
comment
К вашему сведению, вы должны использовать функцию .on вместо .bind. Из того, что я только что прочитал, вся обработка событий будет выполняться через .on в следующих версиях js. Параметры одинаковы для bind и on.   -  person Prusprus    schedule 25.01.2013

Ответы (2)


arrow_upward
2
arrow_downward

Вручную выберите правильный якорь:

jQuery('.cb-toc a').click(function(e){
    var str = jQuery(this).attr('href');
    jQuery(str).after(jQuery('.cb-toc'));
}
person Prusprus    schedule 25.01.2013
comment
1. Если вы предотвращаете значение по умолчанию, якорь не будет выполнять свою работу. 2. Используются идентификаторы (вы знаете, для работы хэша), а не классы, поэтому вы можете оставить # и опустить a. - person kapa; 25.01.2013
comment
Верно, спасибо. Обновленное решение. Не связал один и один вместе. сумасшедший - person Prusprus; 25.01.2013
comment
Исправлен вызов переменной. Попробуй это сейчас. Вы ловите какие-либо ошибки в вашей консоли js? - person Prusprus; 25.01.2013
comment
@user751564 user751564 Теперь это в основном то же самое, что и мое решение :). - person kapa; 25.01.2013
comment
@bažmegakapa не предназначен :) - person Prusprus; 25.01.2013
comment
@ user751564 :). Один хороший момент заключается в том, что использование свойства jQuery attr вместо свойства DOM, которое я пробовал, возвращает реальное значение, которое должно быть простым хэшем. Браузер обновляет свойство с полным URL-адресом для меня. Использование this.hash кажется самым чистым способом, если у него нет проблем с кросс-браузерностью, но сейчас мы не будем исследовать это... - person kapa; 25.01.2013
comment
не знал о свойстве hash в jquery. но приятно знать, я буду использовать его с этого момента, спасибо. - person Prusprus; 25.01.2013
comment
@user751564 user751564 Это не свойство jQuery, это собственный DOM. - person kapa; 25.01.2013

arrow_upward
2
arrow_downward

Когда ваш обработчик кликов запускается, новая цель еще не установлена, это произойдет позже. Вот почему TOC всегда позиционирует себя рядом с предыдущей целью (отлично работает после двух кликов по одной и той же ссылке).

Вы можете либо использовать setTimeout(), чтобы отложить выполнение размещения оглавления, либо прослушать событие onhashchange, которое запускается, когда браузер устанавливает новую цель. Или вы можете просто отказаться от подхода :target и найти правильный якорь самостоятельно, например:

function foo() {
     //hash will be something like #top
     var hash = this.hash;

     //wait, it looks like an ID selector :)
     jQuery(hash).after(jQuery('.cb-toc'));
}

демонстрация jsFiddle

Возможно, потребуется проделать некоторую работу, поэтому переменная hash всегда содержит правильное значение в каждом браузере (#whatever), поэтому этот пример не является готовым к использованию кодом, а просто иллюстрацией.

person kapa    schedule 25.01.2013