1

私はjqueryが初めてで、ユーザーが助けてくれたこのコードを機能させようとしていますが、現在問題が発生しています。

写真のウェブサイトの上部にボタンがあり、ボタンをクリックすると、クリックしたカテゴリ (つまり、「風景」「ポートレート」「結婚式」) に、それらの「タグ」(div クラス) を持つすべての投稿が表示されるようにしたいと考えています。 ）。フィドルで動作していますが、投稿とボタンの周りにdivをラップしてページに配置しようとすると、兄弟セレクターが壊れます。

古い作業フィドルはこちら (div ラッパーなし): http://jsfiddle.net/PxpXy/

壊れたフィドル(div ラッパーを使用): http://jsfiddle.net/JUsZK/10/

上部のボタンとコンテキスト (#test & #test2) の両方にラッパーを追加しましたが、(明らかに) 兄弟セレクターが機能しません。

サイト機能を保持し、div ラッパーを使用してページ上で再配置するにはどうすればよいですか? 兄弟セレクターはもう必要ありませんか?

ありがとうございました！

4

4 に答える 4

3

ID「test」のdivで写真をラップした場合、これを行うことができます：

$('#test .post').hide();

つまり、「#test」div 内にあるクラス「.post」の要素を非表示にします。

デモ: http://jsfiddle.net/nnnnnn/JUsZK/12/

于 2012-08-05T14:34:57.187 に答える
2

セレクターを次のように修正するだけです。

$('button').click(function() {
    $('div.post').hide()
    $('.' + this.id).show(500);
});

JSフィドルデモ。

$('div.post')もちろん、willを使用すると、のを使用してすべての div要素でclass機能しpostます。応答を特定 divのsのみに制限するには、親コンテナ要素を指定してfind()から、特に関心のある要素のみを操作するために使用できます。次に例を示します。

$('button').click(function() {
    $(parentElementSelector).find('.post').hide()
    $('.' + this.id).show(500);
});

id多重問題を修正していないことに注意してください。ただし、（または、問題で見られるclassjQueryで使用していないため、単に削除することをお勧めします）。id

于 2012-08-05T14:39:02.983 に答える
2

あなたのdivはもはや兄弟ではありません。修正されたバージョンはhttp://jsfiddle.net/JUsZK/11/になる可能性があります

于 2012-08-05T14:34:54.300 に答える
1

HTML では、ids は一意である必要があります。2 番目の (動作していない) フィドルには、 id を持つ 3 つの div がありますtest。

于 2012-08-05T14:32:51.353 に答える