jQuery/JavaScript: активация функции щелчка по привязкам на той же странице

На веб-сайте, который я разрабатываю, есть список ссылок в нижнем колонтитуле на каждой странице. К этим ссылкам добавляются якоря, например:

<ul>
    <li class="lines exp"><a href="services.html#sa">Service A</a></li>
    <li class="lines exp"><a href="services.html#sb">Service B</a></li>
    <li class="lines exp"><a href="services.html#sc">Service C</a></li>
</ul>

На целевой странице «services.html» для этих ссылок есть ряд переключаемых элементов div, каждый из которых соответствует приведенным выше привязанным ссылкам, например:

<div id="sa" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service A</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sb" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service B</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sc" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service C</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>

Конечная цель состоит в том, чтобы ссылки нижнего колонтитула активировали свой целевой div «toggle-trigger» с имитацией события щелчка, который будет переключать открытие связанного div «toggle-container» после загрузки страницы «services.html».

С этой целью я добавил следующий JavaScript/jQuery в «services.html» в конце тела, поскольку он должен срабатывать только после того, как страница будет готова:

<script type="text/javascript">
    $( document ).ready(function() {
        var target = document.URL;
        var regex = /services\.html#[a-z]{2}$/;
        var result = regex.exec(target);
        console.log("Target / Regex / Result: " + target + " / " + regex + " / " + result);
        if (result) {
            var divID = /#[a-z]{2}/.exec(result);
            console.log("divID: " + divID[0]);
            $(divID[0]).delay(1000).trigger('click');
        }
    });
    $(".exp").click(function() {
        var target = window.location.hash;
        console.log("Target: " + target);
        $(target).delay(1000).trigger('click');
    });
</script>

Я добавил вторую функцию, поскольку переменная result в первой функции всегда равна нулю при переходе по привязанным ссылкам на одной странице.

В настоящее время это работает именно так, как я хочу, когда щелкаю ссылку нижнего колонтитула на других страницах сайта. Однако, когда я уже нахожусь на странице «services.html» и нажимаю одну из ссылок нижнего колонтитула на той же странице, она не работает при первом нажатии, а вместо этого работает при втором нажатии привязанной ссылки.

Конечно, желательно, чтобы он работал одинаково, независимо от страницы, на которой щелкнули ссылку нижнего колонтитула.

Что я делаю неправильно?


person Enzan    schedule 19.09.2013    source источник
comment
На заметку: $(document).ready(function(){}); псевдоним $(function(){}); делает именно то, что вам нужно: он запускает функцию после завершения загрузки структуры HTML. Больше нет необходимости помещать его в конец тела.   -  person Kiruse    schedule 20.09.2013
comment
Ах да, вы правы... но по другим причинам на этом сайте все скрипты загружаются в конец тела, включая jQuery, поэтому вышеприведенный скрипт тоже должен быть.   -  person Enzan    schedule 20.09.2013
comment
Справедливо. Я предполагаю, что ваша администрация не хочет создавать ненужные накладные расходы JavaScript до загрузки фактического веб-сайта, что разумно делать, например, при работе с API социальных сетей.   -  person Kiruse    schedule 20.09.2013
comment
Ну... учитывая то, что вы говорите о коде, работающем на других страницах... Я совершенно уверен, что проблема связана с тем, что вы находитесь на той же странице. Это означало бы, что проблема либо в том, что $document.ready делает что-то неправильно, либо в обработчике кликов... вы проверяли, что именно происходит, когда вы щелкаете в первый раз? возможно, часть кода работает... и вы можете найти проблему в отладке.   -  person Lyth    schedule 20.09.2013
comment
Да Лит, точно. Он отлично работает при переходе с другой страницы, но не работает, когда целевой страницей является текущая страница. Что, кажется, происходит, так это то, что в отношении второй функции переменная target не заполняется при самом первом щелчке. При всех последующих кликах он заполняется. Я пока не понимаю, почему это так.   -  person Enzan    schedule 20.09.2013
comment
Можете ли вы сказать мне, как выглядит URL-адрес после вашего первого клика?   -  person Lyth    schedule 20.09.2013
comment
Как ни странно, якорь действительно добавляется к URL-адресу при первом щелчке... каким-то образом, я до сих пор не понимаю, window.location.hash не присвоил фрагмент target при первом щелчке, как ожидалось.   -  person Enzan    schedule 20.09.2013


Ответы (1)


Как я это вижу... когда вы уже находитесь на странице services.html, что-то ведет себя плохо. Это может быть href="services.html#sa". Хотя я не знаю, что именно может быть не так, я бы порекомендовал получить ваш «#anchor» по-другому.

Что-то типа

$(".exp").click(function(){
  $a = $(this).find("a").first() ;
  href = $a.attr('href') ;
  // parse the href to retrieve #anchor
}) ;

Таким образом, вы не будете зависеть от window.location..., который может плохо себя вести, когда вы уже находитесь на services.html.

person Lyth    schedule 19.09.2013
comment
Вы прочитали всю задачу? Он четко указал, что его код находится в конце тега body. Таким образом, нет проблем с привязкой события клика к несуществующим элементам класса .ext. (Редактировать: теперь с вашим редактированием кажется более разумным решить эту проблему.) - person Kiruse; 20.09.2013
comment
Кажется, он загружает страницу. В этом случае могут быть новые элементы DOM. Я не уверен, что понял механику, возможно, я слишком быстро прочитал код и немного визуализировал. - person Lyth; 20.09.2013
comment
Я не уверен, что он действительно AJAX-загружает его. Нам нужна обратная связь от спрашивающего. Но поскольку он сказал, что это работает по второму клику, я сомневаюсь, что он выполняет такой запрос. - person Kiruse; 20.09.2013
comment
Ага, я тоже не уверен. - person Lyth; 20.09.2013
comment
Страница не загружается через AJAX. По сути, проблема заключается в том, что во второй функции target не присваивается значение при самом первом нажатии одной из привязанных ссылок нижнего колонтитула, когда пользователь уже находится на странице services.html. При последующих кликах он заполняется. Очень своеобразно.... - person Enzan; 20.09.2013
comment
В порядке. Подожди. У меня может быть решение. - person Lyth; 20.09.2013
comment
Лит, я не могу отблагодарить тебя после того, как боролся с этой проблемой в течение ~ 2 часов. Ваше решение работает отлично. - person Enzan; 20.09.2013
comment
Круто :D и действительно странно. - person Lyth; 20.09.2013