У меня есть Javascript, который должен вызывать две функции, но это не так. Я подозреваю, что знаю, почему, но я не знаю, как это исправить. Здесь мой jQuery:
var is_mobile = false,
page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
var ul = $('nav > ul'),
li = ul.children('li'),
href = li.find('a[href*="'+page+'"]'),
is404 = true;
if($('#mobile').css('display')=='none') {
is_mobile = true;
}
if(is_mobile) {
orderList();
prepareList();
}
});
/************************/
/* Reorders the list */
/**********************/
function orderList() {
$(li.find('a[href*="contact.php"]')).removeAttr('style');
//move element to top
ul.prepend(href.parent());
if(page != ""){
li.children('a').each(function(){
if (page == $(this).attr('href')) {
is404 = false;
}
});
if (is404) {
//if the user is on a page not in the nav, add a 404 link at the top of the nav
ul.prepend("<li><a href='404NotFound.php'><icon><img src='images/404-icon.png'></icon>404</a></li>");
}
}
};
/**************************************************************/
/* Prepares the list to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$ul.find('li:has(ul)').unbind('click').click(function(event) {
if(this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
}).addClass('collapsed').removeClass('expanded').children('ul').hide();
//Hack to add links inside the cv
$('#expList a').unbind('click').click(function() {
window.open($(this).attr('href'));
return false;
});
//Create the button functionality
$('#expandList').unbind('click').click(function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList').unbind('click').click(function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
Я подозреваю, что Javascript может не вызывать функции, потому что в них есть jQuery, но если в этом случае я абсолютно не знаю, как это исправить. Кстати, is_mobile
возвращается true, когда я проверяю это на своем iTouch. Любые идеи парней. Благодарю!
Вы уверены, что функции не вызываются? Или они называются, но не дают результатов? Попробуйте поставить точку останова в каждой функции или вызов console.log() или даже alert(), чтобы вы могли видеть, вызваны ли они. Мне кажется, что их нужно называть.
Однако, я думаю, у вас проблемы с переменным объемом. Вы определяете переменные ul
и li
внутри вашей функции document.ready(), но ссылаетесь на них в orderList()
и prepareList()
, которые определены на верхнем уровне. Поэтому ваши переменные не видны вашим функциям. И в prepareList()
вы ссылаетесь на $ul
, а не на ul
. $ul
не определен вообще, поэтому он был создан как глобальный (n пустой) при первом упоминании.
Попробуйте определить эту переменную за пределами всех функций вместе с is_mobile
а затем не переопределите их с помощью var
в функции document.ready()
, просто присвойте им значения. Или, если вам не нравятся глобальные переменные, оберните все это в модуль, но вам все равно нужно либо сделать переменные видимыми для всех функций в модуле, либо передать их функциям в качестве параметров.
document.ready()
потому что они устанавливаются на основе элементов в HTML.ready()
. Но они не должны быть объявлены там, где они скрыты от других сценариев. (Я вижу, я написал «определено»; «объявлено» более точно.) Если они объявлены внеready()
, они видны как скриптуready()
для установки своих значений, так и другим функциям для чтения эти ценности. Или, функции могут быть перемещены внутриready()
поэтому они находятся в той же области, как предложено в принятом ответе.