0

1つのページに多数のウィジェットがあり、クラス全体を再利用したいと考えています。ウィジェット内の2つのdiv間で可視性を切り替える疑問符アイコンがあります。

問題は、現在のウィジェットのみをターゲットにするコードを取得できないことです。私は通常のテクニックを試しましたが、ここでは何も機能していないようです。

フィドルはここにあります、http：//jsfiddle.net/clintongreen/9hvVn/

問題のクリック機能は、疑問符アイコンから機能します。トグルクラスが必要なdivは、.widget-contentと.widget-content_nextです。

ありがとう ：）

4

3 に答える 3

3

あなたは兄弟と一緒に親を使うことができます

$("a.expand_widget").live("click", function () {
    $(this).parent().siblings(".widget-content").toggleClass("hidden");
    $(this).parent().siblings(".widget-content_next").toggleClass("hidden");
});

http://jsfiddle.net/KKMaW/

または、セレクターを親ノードに制限することもできます

$("a.expand_widget").live("click", function () {
    var root = this.parentNode.parentNode;
    $(".widget-content",root).toggleClass("hidden");
    $(".widget-content_next",root).toggleClass("hidden");
});
于 2011-12-15T22:37:33.980 に答える
3

widget-contentとwidget-content_nextは、リンクの直接の祖先ではありません。次のようなものが必要だと思います。

 $(this).closest(".widget").find('.widget-content').toggleClass("hidden");
 $(this).closest(".widget").find(".widget-content_next").toggleClass("hidden");
于 2011-12-15T22:38:07.787 に答える
2

この方法は、祖先のみを検出し、祖先の兄弟や子孫は検出しないため、この方法は機能し.closestないと思います。

DOM要素のセットを表すjQueryオブジェクトが与えられると、.closest（）メソッドはDOMツリー内のこれらの要素とその祖先を検索し、一致する要素から新しいjQueryオブジェクトを構築します。.parents（）メソッドと.closest（）メソッドは、どちらもDOMツリーをトラバースするという点で似ています。

解決

を使用する代わりに、関数.closestを使用して所有者を検索し、次に他のツリー走査関数を使用して、特定のセレクターに一致する子を検索することができます。.parent

この編集されたコードを試してください-http: //jsfiddle.net/9hvVn/3/：

$("a.expand_widget").live("click", function () {
    var parentWidget = $(this).parent('div.widget-head')
        .parent('li.widget');
    parentWidget.children(".widget-content").toggleClass("hidden");
    parentWidget.children(".widget-content_next").toggleClass("hidden");
});

かなり厳しいですが、必要に応じて少し緩めることができます。div.widget-head親の親を最初に取得する代わりに、でさまざまな兄弟関数を使用することもできます。

于 2011-12-15T22:34:41.147 に答える