1

これは確かに単純なものですが、それを機能させる方法を考えることはできません。私は . next() と . nextAll() を試してみましたが、役に立ちませんでした。私が考えることができる唯一のことは、私がしようとしている機能がコードの流れのために機能していないということです。とにかく、以下はあなたのためのjqueryとhtmlです。ダウンロードがクリックされたときにフォームボックスをフェードインさせようとしています。

HTML:

                 <div class="pdfs">
                    <div class="pdf-left">
                        <div class="image">
                            <img src="images/pdfs/macrolux/1.jpg" width="100" height="79">
                        </div>
                        <div class="text">
                            <div class="view">View</div>
                            <div class="download">Download</div>
                        </div>
                    </div>
                    <div class="pdf-right">
                        <div class="image">
                            <img src="images/pdfs/macrolux/2.jpg" width="100" height="79">
                        </div>
                        <div class="text">
                            <div class="view">View</div>
                            <div class="download">Download</div>
                        </div>
                    </div>
                </div>
                <div class="form-box">
                    Form
                </div>

jQuery:

$(document).ready(function(){
    $('div.download').on('click', function(){
        $(this).next('div.form-box').fadeIn('slow');
    });
});
4

4 に答える 4

2

はありません$(this).next()。chrome/firefox でテストできます。

console.log($('div.download').next());

権利を取得するにはdiv、次を試してください。

$(document).ready(function(){
    $('div.download').on('click', function(){
        $(this).parent().parent().parent().next().fadeIn('slow');
    });
});

デモ

form-boxまたは、非表示にしたいものが 1 つしかない場合:

$(document).ready(function(){
  $('div.download').on('click', function(){
      $('div.form-box').fadeIn('slow');
  });
});
于 2013-01-20T12:24:51.090 に答える
2

複数持っていない場合はこれで十分ですdiv.form-box

$(document).ready(function(){
  $('div.download').on('click', function(){
      $('div.form-box').fadeIn('slow');
  });
});

そして、あなたがdiv.form-boxそれぞれの後に持っている場合pdfs div:

$(document).ready(function(){
    $('div.download').on('click', function(){
        $(this).parents('.pdfs').next('div.form-box').fadeIn('slow');
    });
});

デモ

于 2013-01-20T12:25:10.170 に答える
1

$(this).next()「HTMLでこれ以降に来るものすべて」ではなく、次の兄弟ノードをターゲットにします。

次のことができます。

$(this).parent().parent().parent().next().fadeIn('slow');

これはお勧めできません。DOM に変更を加えるたびに、JS が変更されます。それ自体をより適切にターゲットにできます.form-box。

于 2013-01-20T12:25:49.123 に答える
1

受け入れられた答えは脆弱です。ドキュメント構造が変更された場合、jquery を書き直す必要があります。

より一般的な解決策は、フォームボックスの div とダウンロード div に関連する ID を与えることです。

<div id="download-1" class="download">
   Download<
</div>

と

<div id="download-1_formbox" class="form-box">
    Form
</div>`

次に、あなたのjqueryで

$(document).ready(function(){
    $('div.download').on('click', function(){
        var divId=$(this).attr("id");
        $("#" + divId + "_formbox").fadeIn('slow');
    });
});

更新: リクエストに応じて、トグルするコードを少し追加しました。動作するフィドルはこちら/ (最初のダウンロード リンクのみが動作し、2 番目のリンクには ID が付与されませんでした)

于 2013-01-20T12:38:34.670 に答える