Как остановить переменную от изменения ее значения

Question

Я пытаюсь написать анимацию, чтобы при щелчке jQuery будет записывать положение объектов относительно окна браузера в переменной (projectPosition), затем перемещать ее где-то еще и установите его как «открыто». Если он снова щелкнут, он вернется в исходное положение, как указано в переменной, и отметьте его закрытым.

Проблема заключается в том, что я объявляю эту переменную в событии, но это означает, что она получает redeclared при повторном нажатии, переписывая значение его исходной позиции. Я попробовал объявить переменную в выражении if, чтобы она была установлена ​​только при щелчке и закрытии проекта, но тогда это значение недоступно из else if.

Есть ли способ, чтобы jQuery сохранял значение, установленное с того момента, когда оно было помечено как закрытое? Вот код:

$(".projectContainer").click(function(){ 
    var projectPosition = $(this).offset();; 
    var selProject = (this); 
    if (!projectOpen){ 
     $(".projectContainer").not(this).fadeOut(200,"swing",function(){ 
      $(selProject).animate({ 
       left:'0px', 
       top:'80px', 
       width:'100vw'},600,"easeOutQuint"); 
     });  
     projectOpen = true; 
    } 
    else if (projectOpen){ 
     $(this).stop(true, true).animate({ 
      left:'projectPosition.left', 
      top:'projectPosition.top', 
      width:'384px'},400,"swing",function(){ 
       $(".projectContainer").not(this).fadeIn(200); 
      }); 
     projectOpen = false; 
    } 
}); 

Answer 1

Проблема заключается в том, что вы используете локальную переменную, которая существует только до выхода обработчика события. Объявите переменную в вне области видимости, также присвоение значения должно происходить только в if блоке

var projectPosition; 
$(".projectContainer").click(function() { 
    var selProject = (this); 
    if (!projectOpen) { 
     projectPosition = $(this).offset();; 
     $(".projectContainer").not(this).fadeOut(200, "swing", function() { 
      $(selProject).animate({ 
       left: '0px', 
       top: '80px', 
       width: '100vw' 
      }, 600, "easeOutQuint"); 
     }); 
     projectOpen = true; 
    } else if (projectOpen) { 
     $(this).stop(true, true).animate({ 
      left: projectPosition.left, 
      top: projectPosition.top, 
      width: '384px' 
     }, 400, "swing", function() { 
      $(".projectContainer").not(this).fadeIn(200); 
     }); 
     projectOpen = false; 
    } 
}); 

Answer 2

Вы могли бы использовать что-то вроде:

if(typeof(variable) != "undefined" && variable !== null) { 
    //Write to variable because item wasn't clicked. 
} 

Так как только переменная установлена, оно не будет установлен снова при повторном нажатии, потому что его не «неопределенные», а не «нулевой» ,