Ajax 루프를 사용하여 정상적으로 성능을 저하시키는 방법

Question

특정 아이콘을 클릭하면 다른 루프로 교체되는 메인 루프가 있습니다. 각 루프에는 실제로 자체 페이지가 있지만 자바 스크립트를 사용하는 사용자는 홈페이지 콘텐츠 영역에서 루프를 전환 할 수 있습니다. 나는 그것을 수행하는 방법에 대한 자습서를 읽었고 실제 페이지에 링크를 허용하지 않는 링크에 대한 href로 #을 사용하고 javascript에서 해당 링크를 무시하고 대신 ajax를 수행합니다. 그래서 내 질문은 어떻게하면 아래 로이 프로세스를 설정할 수 있습니다 정상적으로 저하됩니다.

mysite.com/my-favorites라는 페이지가 있습니다.

내 홈페이지에서 아약스로 페이지 콘텐츠를 호출하는 방법입니다.

<a id="fav" class="trigger-loop" href="#"><div id="favorite-icon"></div></a> 

jQuery(document).ready(function($){ 
$('#fav.trigger-loop').click(function(){ 
    $('.trigger').removeClass('active'); 
    $('.trigger-loop').removeClass('active'); 
    $('#fav.trigger-loop').addClass('active'); 
    $('#boxes').empty(); 
    $.post(
     WPaAjax.ajaxurl, 
     { 
      action : 'loop_fav', 
     }, 
     function(response) { 
      $('#boxes').append(response).masonry('reload'); 
      $('.panel').hide("slow"); 
     } 
    ); 
}); 

}); 

add_action('wp_ajax_loop_fav', 'loop_fav'); 
function loop_fav(){ 
wpfp_shortcode_func(); 

exit; 
}  

Answer 1

질문이있는 경우.

는 # 대신 URL을 추가

<a id="fav" class="trigger-loop" href="mysite.com/my-favorites"><div id="favorite-icon"></div></a> 

하고 click 기능에

, return false; 때문에 페이지가 지정된 URL로 이동하지 않고 대신 아약스을한다.

$('#fav.trigger-loop').click(function(){ 
    ... your code... 
    ... your code.... 
    return false; 

})