0

構築するクールなインターフェイスがあります。

画像の「タイル」を含む水平スクロール div と、それぞれの下にラジオ ボタンがあります。ユーザーはスクロールして画像を決定し、それをクリックします。ラジオボタンがチェックされ、jQuery は下に別の水平スクロール div を表示します。「今、サブカテゴリを選択してください」...ユーザーは、別の「タイル」を選択して、選択をさらに絞り込むことができます。これでプロセスは完了です。

問題は、最初の選択と一致するクラスがない場合、選択の第 2 層のすべての要素を非表示にする方法がわからないことです。紛らわしいかもしれません。ここにいくつかの簡略化された HTML があります。スペースを節約するために jsfiddle に投稿しました。http://jsfiddle.net/RTGC3/

要約すると、何が必要なのかが HTML からわかります。ユーザーがカテゴリをクリックすると、カテゴリが表示されます。クリックした親カテゴリと同じ ID のないサブカテゴリは非表示になります。他のすべては、含まれている div を「表示」する準備が整った状態で表示されたままになります。

問題を十分に説明できたことを願っています。提供されたヘルプに感謝します。

マイク。

4

2 に答える 2

1

たとえば、ID 1の両方のコンテナdivに同じ名前を付けると、2つのclass="cat_id_1"になります。

次に、何かがこれに似ています：

$('#cat-container div input').on('change', function() {
    var id = $(this).parent().attr('class');
    $('#des-container div.'+id).fadeToggle();
});

CSSにはdisplay：noneがあります。＃des-containerのすべてのdiv（初心者向け）。これは、変更時にラジオボタンをリッスンします。最初に変更すると、2行目に一致するクラスがあるdivで.fadeToggle（）が呼び出されて表示され、2回目の変更で再び非表示になります。

これはあなたが望んでいたことでしたか？

実際には、2行目のすべての項目を表示したいと思いますが、ラジオボックスをオンにすると、ラジオボタンのIDに一致するもの以外のすべてを非表示にしますか？次に、次のようにすることができます。

 $('#des-container div'+id).addClass('show');
 $('#des-container div').not('div.show').fadeToggle();

したがって、基本的には、表示することにしたオブジェクトにクラスを追加し、そのクラスを持たないものはすべて非表示にします。もちろん、これが逆に機能するためには（ラジオボックスのチェックを外した場合）、変更されたラジオボタンがチェックまたはオフに変更されたことを確認するifステートメントを追加する必要があります。チェックを外した場合は、クラス「show」を削除するだけです。要素から。

于 2012-05-10T09:54:15.633 に答える
1

このコードで試してください：

$(document).ready(function() {
   $('input[type=radio][name="type"]').live('change', function() {
       var className = $(this).parent().attr("class");
       var clsID = className.split('_')[2];
       var subID = "in_cat_" + clsID;
       $("div[class*=in_cat]").hide();
       $("div." + subID).toggle("slow");
   });
});

これは JSFiddle リンクです: http://jsfiddle.net/RTGC3/3/

于 2012-05-10T10:06:56.000 に答える