在不同的函数中使用hide（）作为相同的元素

Alright this is my first day with JQuery so have fun with these functions I made. I'm trying to hide a div (#panel) when different triggers are clicked. Below is three functions in which all three of them need to hide (#panel) when used. The way I have it setup it's only working for the first function. The other two don't hide the element. So without further ado.

好吧,这是我第一天使用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>

2 个解决方案

#1

The problem is that you have a global variable which is being overwritten and causing undesired affects.

问题是你有一个全局变量被覆盖并导致不良影响。

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

That line will set $panel as a global variable since it has no parent scope aside from document.ready. When you are inside one of the callback closures, there is a conflict of interest when $panel is defined again. Consider changing these names to remove the conflict.

该行将$ panel设置为全局变量,因为除了document.ready之外它没有父作用域。当您处于其中一个回调闭包内时,再次定义$ panel时会出现利益冲突。请考虑更改这些名称以消除冲突。

The result is calling the global $panel when inside of

结果是在内部调用全局$面板

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

instead of calling the localized version you were thinking of. That is why only one of them is hiding.

而不是调用您正在考虑的本地化版本。这就是为什么只有其中一个人藏匿的原因。

#2

try this for both $('#fame.trigger-loop').click and $('#new.trigger-loop').click;

尝试这两个$('#fame.trigger-loop')。点击和$('#new.trigger-loop')。点击;

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

#1