0

OK、多分それはその日の遅いです！私はほとんどの関連する質問を試しました、それはかなり簡単だと確信していますが、ここに行きます：

HTML構造は次のとおりです。

<article>

<div class="info-wrap">
<p>blah blah</p>
<a href="#" class="info-close">Close div!</a>
</div>

<a href="#" class="info-show">Show div!</a>

</article>

上記の構造の複数のインスタンス（Wordpressループ）が存在するため、そのインスタンス内のdivのみを表示する必要があります（すべてではありません）。これはこれまでの私のjQueryです：

$("a.info-show").click(function(){
     $(this).parent('article').find('.info-wrap').animate({ opacity: 'show' }, "slow");
    return false;
});

動作していません。ここで何が欠けていますか？ありがとう！

4

6 に答える 6

2

これを試して：

$(document).ready(function(){
    $("a.info-show").click(function(e){
        e.preventDefault();
        $(this).parents('article').find('div.info-wrap').animate({ opacity: 1 }, "slow");
        return false;
    });
});

または使用：

$(document).ready(function(){
    $("a.info-show").click(function(e){
        e.preventDefault();
        $(this).parents('article').find('div.info-wrap').fadeIn('slow');
        return false;
    });
});

http://api.jquery.com/fadeIn/およびhttp://api.jquery.com/animate/をお読みください

于 2013-03-26T11:10:47.283 に答える
1

次のように作成された例を使用できます

$("a.info-show").click(function(e){

$(this).parents('article').find('.info-wrap').fadeIn('slow');
    $("a.info-show").hide('slow');
    return false;
});


$("a.info-close").click(function(e){

$(this).parents('article').find('.info-wrap').fadeOut('slow');
 $("a.info-show").show('slow');
    return false;
});

フィドルリンクを使用して質問をテストします。

于 2013-03-26T11:29:03.153 に答える
0

スクリプトがonready内で実行されていることを確認してください。それ以外は、問題ないようです。

$(function(){
    $("a.info-show").click(function(){
        $(this).siblings('.info-wrap').animate({ opacity: 'show' }, "slow");
        return false;
    });
})

デモ：フィドル

于 2013-03-26T11:17:40.200 に答える
0

試す：

$("a.info-show").click(function(e){
    $(this).closest("article").find("div.info-wrap").fadeIn(500);
});

また、jqueryの初期化時にクラスが実際に存在することを確認してください。これにajaxを使用している場合はbind、親ノードに対してこれらを使用することをお勧めします。

于 2013-03-26T11:18:37.107 に答える
0

あなたのコードは私にはうまく見えます。私が考えることができる唯一の問題は、クリック関数をイベント（document.ready（）など）にバインドしていないことです。これがあなたのために働くJSFiddleです。

JS

$(document).ready(function(){
    $('.info-show').click(function(){
        var info = $(this).parent().find('.info-wrap > p');
        info.animate({ opacity: 1 }, "slow");
    });
    $('.info-close').click(function(){
        var info = $(this).parent().find('p');
        info.animate({ opacity: 0 }, "slow");
    });
});

また、これが機能するように、最初に不透明度を0に設定していることを確認してください。

CSS

article .info-wrap > p {
   opacity: 0;
}
于 2013-03-26T11:20:07.563 に答える
0

試してみてください.prev()：

$("a.info-show").click(function () {
   $(this).prev('.info-wrap').fadeIn();
   return false;
});

フィドルをチェックアウト

于 2013-03-26T11:20:43.700 に答える