범위를 벗어날 가능성이 있음 jquery

Question

이 아약스 스타일의 WordPress 포트폴리오 테마를 만드는 중이고 나는이 마지막 작은 일을하는 방법에 조금 붙어 있습니다.

기본적으로 오른쪽 상단의 "정보"링크를 클릭하면 해당 페이지의 내용을 div에로드합니다. 한 번 클릭하면 콘텐츠를 다시로드하지 않도록 해당 링크를 다시 클릭하면 어떻게 지정합니까?

이제 길이를 사용하는 것이 좋습니다. 실제로는 문제가 아닙니다. 여기

는 상단 네비게이션에 사용되는 자바 스크립트 여기

진행 http://themes.thefinishedbox.com/portfolio/의 주제에 대한 링크 것입니다 :

$(function() { 
    $('#navigation ul > li a').each(function() { 

     $(this).click(function(e) { 

      $.ajaxSetup ({ 
       cache: false 
      }); 

      e.preventDefault(); 

      var $href = $(this).attr('href'); 

      var $loader = '<div id="whiteLoader" />'; 

      if($('#page').length == 0) { 

       $('<div id="page" />').insertAfter('#header'); 

       $('#page').queue(function() { 
        $(this).animate({height: '120px'}, 300); 
        $(this).html($loader); 
        $(this).animate({backgroundColor: '#fff'}, 300); 
        $(this).dequeue();      
       }); 

       $('#page').queue(function() { 
        $('#page').load($href + ' #pageEntry', function() { 
         var $height = $('#pageEntry').height(); 
         var $h = $height + 16; 
         $(this).animate({height: $h + 'px'}, 600, function() { 
          $(this).css({height: 'auto'}); 
         }); 
         // This is the sort of thing I'm trying to achieve 
         // is it out of scope? Not sure of the correct way 
         // to achieve this. 
         e.click(function() { return false; }); 
        }); 
        $(this).dequeue(); 
       }); 

      } else { 

       $('#pageEntry').animate({height: 0}, 600, function() { 

        $(this).remove(); 

        $('#page').queue(function() { 
         $(this).animate({height: '120px'}, 300); 
         $(this).html($loader); 
         $(this).animate({backgroundColor: '#fff'}, 300); 
         $(this).dequeue();      
        }); 

        $('#page').queue(function() { 
         $('#page').load($href + ' #pageEntry', function() { 
          var $height = $('#pageEntry').height(); 
          var $h = $height + 16; 
          $(this).animate({height: $h + 'px'}, 600, function() { 
           $(this).css({height: 'auto'}); 
          }); 
         }); 
         $(this).dequeue(); 
        }); 

       }); 
      } 

     }); 

    }); 
}); 

가, 지금은 다른 문에 대한 걱정을 너무 많이 주석을 참조하지 마십시오 라인, 내가 제대로하고 있니? 범위를 벗어 났습니까? 분명히 누군가가 전에이 문제를 보았습니다.

도움을 주시면 감사하겠습니다.

p.s 코드를 많이 축소 할 수 있다는 것을 알고 있습니다. 나중에 설명 드리겠습니다.

Answer 1

one() 함수를 사용하여 이벤트 처리기가 한 번만 실행되도록 할 수 있습니다. 또는 data()을 사용하여 요소에 부울을 바인딩하여 요소가 현재 "활성"(즉, 내용이 표시되어 있음)인지 여부를 나타낼 수 있습니다. 참고로이 두 함수는 모두 JQuery 함수입니다.

Answer 2

이렇게하는 방법은 많이 있으며, 예를 들어 one을 사용하는 것이 좋습니다. 그러나 기존 코드에는 하나의 문제점이있는 것으로 보입니다. e은 클릭 된 요소가 아닌 이벤트 인수입니다. 당신이 뭔가를 할 수 있습니다 :

$(function() { 
    $('#navigation ul > li a').each(function() { 

     $(this).click(function(e) { 

      $.ajaxSetup ({ 
       cache: false 
      }); 

      e.preventDefault(); 

      var $href = $(this).attr('href'), $thelink = $(this); 

      var $loader = '<div id="whiteLoader" />'; 

      if($('#page').length == 0) { 

       $('<div id="page" />').insertAfter('#header'); 

       $('#page').queue(function() { 
        $(this).animate({height: '120px'}, 300); 
        $(this).html($loader); 
        $(this).animate({backgroundColor: '#fff'}, 300); 
        $(this).dequeue();      
       }); 

       $('#page').queue(function() { 
        $('#page').load($href + ' #pageEntry', function() { 
         var $height = $('#pageEntry').height(); 
         var $h = $height + 16; 
         $(this).animate({height: $h + 'px'}, 600, function() { 
          $(this).css({height: 'auto'}); 
         }); 
         $thelink.unbind(e); 
        }); 
        $(this).dequeue(); 
       }); 

      } else { 

       $('#pageEntry').animate({height: 0}, 600, function() { 

        $(this).remove(); 

        $('#page').queue(function() { 
         $(this).animate({height: '120px'}, 300); 
         $(this).html($loader); 
         $(this).animate({backgroundColor: '#fff'}, 300); 
         $(this).dequeue();      
        }); 

        $('#page').queue(function() { 
         $('#page').load($href + ' #pageEntry', function() { 
          var $height = $('#pageEntry').height(); 
          var $h = $height + 16; 
          $(this).animate({height: $h + 'px'}, 600, function() { 
           $(this).css({height: 'auto'}); 
          }); 
         }); 
         $(this).dequeue(); 
        }); 

       }); 
      } 

     }); 

    }); 
});