2

さて、これはJQueryの最初の日なので、私が作成したこれらの関数を楽しんでください。別のトリガーがクリックされたときにdiv（#panel）を非表示にしようとしています。以下は、使用時に3つすべてを非表示にする必要がある3つの関数（#panel）です。私が設定した方法では、最初の機能でのみ機能します。他の2つは要素を隠しません。だからそれ以上の苦労なしに。

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>
4

2 に答える 2

1

問題は、上書きされて望ましくない影響を引き起こしているグローバル変数があることです。

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

その行は$panel、以外に親スコープがないため、グローバル変数として設定されdocument.readyます。コールバッククロージャの1つにいる場合、$panelが再度定義されると、競合が発生します。競合を取り除くために、これらの名前を変更することを検討してください。

$panel結果は、内部でグローバルを呼び出すことです

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

あなたが考えていたローカライズされたバージョンを呼び出す代わりに。そのため、そのうちの1つだけが隠れています。

于 2012-06-29T23:03:55.413 に答える
0

との両方$('#fame.trigger-loop').clickでこれを試してください$('#new.trigger-loop').click;

var $panel = $(this).closest('ul').find(".panel-container").find(".panel");
于 2012-06-29T23:10:39.037 に答える