チェックボックスを利用した要素の絞り込みを実装しており、子要素が全て非表示になったら親要素も非表示にしたいと思っているのですが、ググっても思うようなサンプルが見つからず、ご教授いただければと思っております。
同じclassを持った親要素が複数ある状態で、それぞれ中に子要素が不特定数入っています。
それとは別にチェックボックスが複数用意されており、子要素のclassと、選択されたチェックボックスを見て、それが含まれていない場合のみ、子要素に「class="hidden-not-○○"(hidden-not-red、hidden-not-sour等)」が付与され、css制御で「[class*="hidden-"]{display:none}」が適用され非表示になります。
また、選択したチェックボックスを解除すると、付与された非表示用のclassが削除され、再び表示されるようになります。
ある親要素内の子要素が全て非表示になった場合、親要素に「class="hidden-not-display"」を付与したいのですが、どのようにすればよろしいでしょうか。
<script>
var $chkbxFilter_tags = ['red','yellow','green','vegetable','fruit','sweet','hot','sour'];
var $chkbxFilter_blocks = ['section']
</script>
<div id="search-box">
<div class="list-group">
<label class="list-group-item disabled">
<p class="list-group-item-text">色</p>
</label>
<label class="list-group-item">
<input type="checkbox" id="red" class="sort s_color">
<h4 class="list-group-item-heading">赤</h4>
</label>
<label class="list-group-item">
<input type="checkbox" id="yellow" class="sort s_color">
<h4 class="list-group-item-heading">黄</h4>
</label>
<label class="list-group-item">
<input type="checkbox" id="green" class="sort s_color">
<h4 class="list-group-item-heading">緑</h4>
</label>
</div>
<div class="list-group">
<label class="list-group-item disabled">
<p class="list-group-item-text">種類</p>
</label>
<label class="list-group-item">
<input type="checkbox" id="vegetable" class="sort s_type">
<h4 class="list-group-item-heading">野菜</h4>
</label>
<label class="list-group-item">
<input type="checkbox" id="fruit" class="sort s_type">
<h4 class="list-group-item-heading">果物</h4>
</label>
</div>
<div class="list-group">
<label class="list-group-item disabled">
<p class="list-group-item-text">味</p>
</label>
<label class="list-group-item">
<input type="checkbox" id="sweet" class="sort s_taste">
<h4 class="list-group-item-heading">甘い</h4>
</label>
<label class="list-group-item">
<input type="checkbox" id="hot" class="sort s_taste">
<h4 class="list-group-item-heading">辛い</h4>
</label>
<label class="list-group-item">
<input type="checkbox" id="sour" class="sort s_taste">
<h4 class="list-group-item-heading">酸っぱい</h4>
</label>
</div>
</div>
<div id="item_images_wrap">
<div class="about_sale_main"> 親要素
<section class="sale_wrap red vegetable sweet"></section> 子要素
<section class="sale_wrap red fruit hot"></section>
<section class="sale_wrap red fruit sour"></section>
<section class="sale_wrap yellow fruit sour"></section>
<section class="sale_wrap yellow vegetable sweet"></section>
<section class="sale_wrap yellow vegetable hot"></section>
<section class="sale_wrap green fruit sweet"></section>
<section class="sale_wrap green fruit hot"></section>
<section class="sale_wrap green vegetable sour"></section>
</div>
<div class="about_sale_main">
...不特定数
</div>
<div class="about_sale_main">
...不特定数
</div>
</div>
$(function (){
$('.s_color').on('click', function() {
if ($(this).prop('checked')){
$('.s_color').prop('checked', false);
$(this).prop('checked', true);
}
});
$('.s_type').on('click', function() {
if ($(this).prop('checked')){
$('.s_type').prop('checked', false);
$(this).prop('checked', true);
}
});
$('.s_taste').on('click', function() {
if ($(this).prop('checked')){
$('.s_taste').prop('checked', false);
$(this).prop('checked', true);
}
});
var $chkbxFilter_all = $('#all');
$chkbxFilter_all.click(function() {
$(".sort").prop('checked',false);
$chkbxFilter_all.prop('checked',true);
});
$("#search-box input").click(function() {
$(this).parent().toggleClass("selected");
$.each($chkbxFilter_tags, function() {
if($('#' + this).is(':checked')) {
$("#item_images_wrap " + $chkbxFilter_blocks + ":not(." + this + ")").addClass('hidden-not-' + this);
$chkbxFilter_all.prop('checked',false).parent().removeClass("selected");
} else if($('#' + this).not(':checked')) {
$("#item_images_wrap " + $chkbxFilter_blocks + ":not(." + this + ")").removeClass('hidden-not-' + this);
}
});
if ($('.sort:checked').length == 0 ){
$chkbxFilter_all.prop('checked',true).parent().addClass("selected");
$(".sort").parent().removeClass("selected");
};
hoge()
});
});
※javascriptは http://jsfiddle.net/kah601xq/11/ を参考にし、改変して使用しています。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
チェックボックスが切り替わる度に、以下のコードを実行すればいけると思います。
- 各.about_sale_mainのタグで実行される
- 自分の子要素sectionの中で、クラスにhidden-を含まない子要素の数を調べる
- 0個なら全ての要素にhiddenが付いているので自身にhidden-not-displayをつける
1個以上なら自身にhidden-not-displayを外す
$(".about_sale_main").each(function(index) {
if($("section:not([class*='hidden-'])", this).length == 0){
// hidden-を含まないsectionが0個、つまり全てhidden-を含んでいるので見えていない
$(this).addClass("hidden-not-display");
}
else {
$(this).removeClass("hidden-not-display");
}
});
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
特定のタグを基軸に考えるなら、siblingを調べるかparentのchildrenを
調べるかのどちらかでしょうね
ただタグ要素がすべて非表示でもダイレクトに書かれたcontentTextが
あるかもしれないので仕様をよく詰めたほうがよいでしょう
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.19%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/07/13 13:55
HTMLにチェックボックスがありません。また、JavaScriptとHTMLも別物で、紐付いていません。
think49
2016/07/13 14:07
参考にしたサンプルURLを掲載すべきと思いますが、http://jsfiddle.net/kah601xq/11/ でしょうか。
対応する親要素にclass属性を割り当てるか、parent()で親要素を辿ってみてはいかがでしょうか。