javascriptのみでコンテンツを絞り込みたい

Question

地域やクラス、性別などの条件を指定してコンテンツを絞り込む機能を実現したいです。こういった機能はサーバーサイトのプログラムを普通は使うと思うのですが、 javascriptのみで作りたいです。その理由ですが、 javascriptを勉強中なので、近い将来自分で手直しできるからです。サーバーサイドのプログラムはjavascriptの後に学びたいと思っています。要望の詳細は下記８つです。１）初めはコンテンツが表示された状態２）１つまたは複数の条件に合う絞り込みを実行し、該当しないものは非表示３）全ての項目で「指定しない」で実行ボタンを押すと全てのコンテンツを表示４）条件に合うコンテンツがない場合は、全てのコンテンツを消した状態で「見つかりませんでした」というテキストを表示５）実行ボタンを押した後に、条件をかえて最後実行可能６）リセットボタンは不要７）コンテンツの数は500ほど。それぞれの情報を頻繁に変更するため、修正が楽な方法がよいです。地域・クラスなどの項目はまだいくつか増えます。８）windowsXP、Vistaの32bitと64bit、7に対応

　　　地域: 　　　　　　
　　　クラス: 　　　　　　
　　　性別: 　　　　　　
　　　年齢: 　　　　　　
　　　学校名: 　　　　　　
　　　体重:

　　
1. 地域：神奈川県
2. クラスA
3. 性別：男性
4. 年齢：25歳
5. 学校名：あ
6. 体重：55kg
7. 名前：ジャバ　スクリプト
　
　　
1. 地域：神奈川県
2. クラスC
3. 性別：女性
4. 年齢：33歳
5. 学校名：う
6. 体重：42kg
7. 名前：グー

babu_baboo · Accepted Answer

こんばんは、ながいのでぶんかつします。

　　　地域: 　　　　　　
　　　クラス: 　　　　　　
　　　性別: 　　　　　　
　　　年齢: 　　　　　　
　　　学校名: 　　　　　　
　　　体重:

　　
1. 地域：神奈川県
2. クラスA
3. 性別：男性
4. 年齢：25歳
5. 学校名：あ
6. 体重：55kg
7. 名前：ジャバ　スクリプト
　
　　
1. 地域：神奈川県
2. クラスC
3. 性別：女性
4. 年齢：33歳
5. 学校名：う
6. 体重：42kg
7. 名前：グー

コンテンツがありません

babu_baboo · Answer

むだにかいとうがおおいものです

indexOf のかいしゃくがちがいます
これには、２しゅるいあります。

String.indexOf
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/String/indexOf

Array.indexOf
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/indexOf
こんかいは、はいれつでりようしています

https://developer.mozilla.org/ja/JavaScript

babu_baboo · Answer

あ～、わたしからせいつめいをきいたりしてだいじょうぶ？ -- >Array.prototype.filter.call(変数,実行させるもの) >Array.prototype.forEach.call ふだんならこうつかうはず。 var ary = [0,1,2,3,4,5,6,7,8,9].filter (function (n) { return !(n%2); });//ary=偶数

0 　
1 　
2

babu_baboo · Answer

あちゃぁ～その２ var a = ListFinder.create (node1); var b = ListFinder.create (node2); に。 >

の中に：がなければ、もっと短くすんだのでしょうか。きっとちょっとだけみじかくなるけど、そもそもそのＬＩようそのなかにある、まーくあっぷがへんなんだよ

年齢3ちゅ

みたいになるのかな？でもそれをかいせきすると、おれのりきりょうじゃみじかくならないな。むしろ、ＬＩようそでなく、table こうぞうからよみとり、ひょうじさせて、でーただけ、createElement をつかって、つくりだしてひょうじすればよい。つくりだすなら、たんいなんて、てーぶるだった、ｔｈようそに、年齢（歳）とかしておけるし。まえのかいとうで、すくりぷとがわにでーたをもつと、すくりぷとがむこうだとなにもひょうじされないよ。でーたをとりこんで、ひつようなものだけを、いろいろなかたちでひょうげんできるようになると、いいですよね。

babu_baboo · Answer

> 性別のところであちゃぁ～ごめん。 >

の中の：を消すと機能しなくなってしまいます。そうじゃないんだなぁ～ var reg_data_format = /^\s*(.+)：((\d+)?(.+))\s*$/; //ラベル,データ,数値,単位と、 value.push ({label: ary[1], text: ary[2], number: Number (ary[3]), unit: ary[4]}); せいきひょうげんで、もし、li ようそに "：" があるのならば、 value.label になり、それいこうが .text になり、もし、.text のさいしょが、すうちならば、.number に、すうちのあとにもじれつがあれば、.unit にだいにゅうされる。 .value の、はいれつも１つなら、はいれつをはずしてるので、もくてきの value のあたいをみつけてね。もし、"："　がないときは、そのまま .value にないかな？ > 意図的に欠陥を作ったということですか？べんきょうは、じぶんのためです。いとてきにではなく、ひつぜんてきにはいりこむのだ！ >>>ListFinder.create でつくったおぶじぇくとのでーたをかいへん var a = ListFinder.create (node1); var b = ListFinder.create (node1); このようにすると、finder がふたつでき、それぞれをせいぎょできる。そして、 a.value[1].value[4].number = 4; みたいにしても、でーたをへんこうすることはできない。ぷろぐらむをつくるときは、じょうぶにつくるのだそうだ。そしてへんこうにもつよく。なので、かってにでーたをいじられないようにつくる。いまは、そのためのべんきょうちゅうでもあります。 > tableを入れて何をしようとしていたのか気になります。でーたのならびは、りすとこうぞうだけではありません。てーぶるだって、りっぱなでーたのりすとこうぞうです。とりこんでしまえれば、おなじようにせいぎょできます。もし、できたならべんりではありませんか？そうそう、IE7 とか IE8 とかでうごかすのなら if(!Array.prototype.filter)Array.prototype.filter=function(b,e){var f=this.length;if(typeof b!="function")throw new TypeError;for(var c=[],a=0;a=2)var b=arguments[1];else{do{if(a in this){b=this[a++];break}if(++a>=c)throw new TypeError;}while(1)}for(;a=2)var b=arguments[1];else{do{if(a in this){b=this[a--];break}if(--a>=c)throw new TypeError;}while(1)}for(;a>=0;a--)a in this&&(b=d.call(null,b,this[a],a,this));return b}; とか。

babu_baboo · Answer

　　　

　　　case 3 :
　　　　data = node.data.replace (/^\s+|\s+$/g, '');
　　　　if (ary = data.match (reg_data_format))
　　　　　value.push ({label: ary[1], text: ary[2], number: Number (ary[3]), unit: ary[4]});
　　　　else
　　　　　if (data)
　　　　　　value.push (data);
　　　　break;
　　　}
　　}
//　　return {node: li, value: value };
　　return {node: li, value: (value.length == 1) ? value[0]: value, selected: false };
　}

//__
　function convertByList () {
　　this.value = A.filter.call (this.node.childNodes, isLiTag).map (getChildNodes, this);
　}

　function convertByDl () {;}
　function convertByTable () {;}
//__

　function convert () {
　　switch (this.node.tagName) {
　　case 'UL' : case 'OL' :
　　　convertByList.call (this); break;
　　
　　case 'DL' :
　　　convertByDl.call (this); break;

　　case 'TABLE' :
　　　convertByTable.call (this); break;
　　}
　}

　function create (node, depth) {
　　if (0 === arguments.length)
　　　return null;
　　
　　var obj = new ListFinder (node, depth);
　　var func = new Function;

　　convert.call (obj);
　　
　　func.convert =
　　　(function () { convert.apply (obj, arguments); });

　　func.setSelected =
　　　(function () { setSelected.apply (obj, arguments); });
　　
　　func.getData =
　　　(function () { return obj.value.slice (0); });
　　
　　func.select =
　　　(function () { return select.apply (obj, arguments); });
　　
　　func.getSelectedNode =
　　　(function () { return getSelectedNode.apply (obj, arguments); });

　　return func;
　}
　
　
　
　ListFinder.create = create;
　
　this.ListFinder = ListFinder;
})();

var finder = ListFinder.create (document.getElementById ('HOGE'),2);

function find () {
　var doc = document;
　var select = doc.getElementsByTagName ('select');
　var cond, value;
　var max, min;
　var mess = doc.getElementById ('NONE');
　var contents = doc.getElementById ('HOGE');
　
　finder.setSelected (true);
　
　if (value = select[0].value)
　　finder.select ((function (v) { return (v.value[0].value.text === value); }), 'and');

　if (value = select[1].value)
　　finder.select ((function (v) { return (v.value[1].value === value); }), 'and');
　
　if (value = select[2].value)
　　finder.select ((function (v) { return (v.value[2].value === value); }), 'and');
　
　if (value = select[3].value) {
　　value = value.split (',');
　　min = +value[0];
　　max = +value[1];
　　finder.select ((function (v) {var v = v.value[3].value.number; return (min<=v && v <max); }), 'and');
　}

　if (value = select[4].value)
　　finder.select ((function (v) { return (v.value[4].value.text === value); }), 'and');
　
　if (value = select[5].value) {
　　value = value.split (',');
　　min = +value[0];
　　max = +value[1];
　　finder.select ((function (v) {var v = v.value[5].value.number; return (min<=v && v <max); }), 'and');
　}

　
　var disp = finder.getSelectedNode ();
　var all = finder.getData ();
　
　
　all.forEach (function (d) { d.node.style.display = (this.indexOf (d.node) < 0) ? 'none': 'list-item'; }, disp);
　
　
　if (disp.length) {
　　mess.style.display = 'none';
　}
　else {
　　mess.style.display = 'block';
　}
}
</script>

もう、めでおうだけではたいへんかもしれませんね。じぶんでもたいへん。
りすとこうぞうを、いったんおぶじぇくとにします。もんだいなのは、liようその、'：' でくぎっているところ。
かってに、せいきひょうげんでぶんかつ。 find かんすうで、つくられたおぶじぇくとをそうさしています。
なんでこんなめんどうにかいているかは、もちろんべんきょうのためです。
ListFinder.create でつくったおぶじぇくとのでーたをかいへんできないようにとか・・・
table ようそとかは、つかれたのでしょうりゃくしました。

javascriptのみでコンテンツを絞り込みたい

こんばんは、ながいのでぶんかつします。

むだにかいとうがおおいものです

あ～、わたしからせいつめいをきいたりしてだいじょうぶ？

あちゃぁ～その２

> 性別のところで

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング