다른 함수에서 같은 요소에 hide() 사용

Question

좋아,이게 내가 JQuery에서 첫날이기 때문에 내가 만든 이러한 함수로 재미있게 지냈어. 다른 트리거를 클릭 할 때 div (#panel)를 숨기려고합니다. 아래는 세 가지 기능이 모두 사용되면 숨길 필요가있는 (#panel) 기능입니다. 내가 그것을 가지고있는 방식은 첫 번째 기능을 위해서만 작동합니다. 다른 두 요소는 요소를 숨기지 않습니다. 그래서 더 이상 고집하지 않고.

jQuery(document).ready(function($){ 
var $panel = $(this).closest(".panel-container").find(".panel"); 
$('#searchsubmit').click(function(e){ 
    $('#boxes').empty(); 
    e.preventDefault(); 
    var $panel = $(this).closest(".panel-container").find(".panel"); 
    var search_val=$("#s").val(); 
    $.post(
     WPaAjax.ajaxurl, 
     { 
      action : 'loop_search', 
      search_val : search_val 
     }, 
     function(response) { 
      $('#boxes').append(response).masonry('reload'); 
      $panel.hide("slow"); 
      $('.trigger').removeClass("active"); 
      $('.trigger-loop').removeClass("active"); 
     } 
    ); 
}); 
$('#fame.trigger-loop').click(function(){ 
var $panel = $(this).closest(".panel-container").find(".panel"); 
    $('.trigger').removeClass('active'); 
    $('.trigger-loop').removeClass('active'); 
    $('#fame.trigger-loop').addClass('active'); 
    $('#boxes').empty(); 
    $.post(
     WPaAjax.ajaxurl, 
     { 
      action : 'loop_fame' 
     }, 
     function(response) { 
      $('#boxes').append(response).masonry('reload'); 
      $panel.hide("slow"); 
     } 
    ); 
}); 
$('#new.trigger-loop').click(function(){ 
var $panel = $(this).closest(".panel-container").find(".panel"); 
    $panel.hide("slow"); 
    $('.trigger').removeClass('active'); 
    $('.trigger-loop').removeClass('active'); 
    $('#new.trigger-loop').addClass('active'); 
    $('#boxes').empty(); 
    $.post(
     WPaAjax.ajaxurl, 
     { 
      action : 'loop_new', 
     }, 
     function(response) { 
      $('#boxes').append(response).masonry('reload'); 
      $panel.hide("slow"); 
     } 
    ); 
}); 

}); 

// - HTML

<li> 
<a id="fame" class="trigger-loop active" href="#"><div id="fame-icon"></div></a> 
</li> 
<li> 
<a id="new" class="trigger-loop" href="#"><div id="gold-artist"></div></a> 
</li> 
<li> 
<div class="panel-container"> 
    <div class="panel"> 
    <----content-----> 
    </div> 
    <a class="trigger" href="#"><div id="playlist-icon"></div></a> 
</div> 
</li> 
<li> 
<div class="panel-container"> 
    <div class="panel"> 
    <----content-----> 
    </div> 
    <a class="trigger" href="#"><div id="random-icon"></div></a> 
</div> 
</li> 

Answer 1

문제는 덮어 쓰기 및 바람직하지 않은 영향을받는 원인이되고있는 전역 변수를 가지고있다. 이 document.ready 제외 부모 범위가 없기 때문에

var $panel = $(this).closest(".panel-container").find(".panel"); 

그 라인은 글로벌 변수 $panel을 설정한다. 콜백 클로저 중 하나에있을 때 $panel이 다시 정의되면 관심 충돌이 발생합니다. 이러한 이름을 변경하여 충돌을 제거하십시오.

결과의

function(response) { 
     $('#boxes').append(response).masonry('reload'); 
     $panel.hide("slow"); 
} 

내부 대신 당신이 생각하고 지역화 된 버전을 호출의 글로벌 $panel를 호출한다. 그래서 그들 중 하나만 숨어 있습니다.

Answer 2

모두 시도하십시오 $('#fame.trigger-loop').click 및 $('#new.trigger-loop').click;

var $panel = $(this).closest('ul').find(".panel-container").find(".panel");