Javascript Глобальные переменные

Question

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript">
var toggle;
toggle=1;
function open(){
jQuery(window).bind("beforeunload", function(){$.post("logout.php");})
$.post("online.php",function(data){
$("#Layer6").html(data);
});
}

function toggle() 
{
$("#Layer4").animate({height:'toggle'});
$("#Layer6").animate({height:'toggle'});

if(toggle==1)
{
$("#toggle").attr('src',"toggle_up.jpg");
toggle=0;
}
else
{
$("#toggle").attr('src',"toggle_down.jpg");
toggle=1; 
}  

}

</script>

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

Пожалуйста, помогите. Спасибо!

Answer 1

Вы назвали свою переменную и используете одно и то же имя ("toggle").Определение функции переопределяет объявление вашей переменной (поскольку оно приходит позже).Переименуйте вашу функцию во что-то другое, например, doToggle().

Причина, по которой возникает этот конфликт, заключается в том, что вы можете назначать объекты функций переменным в JavaScript.По сути, когда вы вызываете функцию, Javascript ищет либо функцию с этим именем, либо переменную с этим именем, если она содержит ссылку на функцию:

var variable = 3;
variable = function() { alert('Function called') };
variable();     // Calls the function, whose reference is stored in 'variable'

Answer 2

Как указала Кэмерон, проблема в том, что переменная и функция имеют одно и то же имя.

Также имейте в виду, что в jQuery есть метод с именем .toggle() ... Это не приведет к конфликту, так как это метод $ или jQuery ... но это может сбить с толку тех, кто читает ваш код.

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

var count = 1;

function toggle() 
{

    $("#Layer4").animate({height:'toggle'});
    $("#Layer6").animate({height:'toggle'});

    $("#toggle").attr('src',"toggle_" + (count++ % 2 ? "up" : "down") + ".jpg");

}

Пример страницы jsFiddle

Выше используется условный оператор Javascript для объединения up или down в атрибут src #toggle.

(count++ % 2 ? "up" : "down") сначала примет текущее значение счетчика (а затем увеличит его значение) и изменит его на 2. Это значение будет либо 1, либо 0. Если это 1 (true), up объединяется. Если это 0 (false), down объединяется. Инкремент должен отслеживать переключение.

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

(function() { 
    var count = 1;
    function open() { ... }
    function toggle() { ... }
    $(function() {
        ...
    });
}());