絞り込み検索を実装したい

###前提・実現したいこと
下記のclass="items"を対象に「絞り込み検索」を行いたいです。

html
1<section id="itemArea">
2<div data-typeA="10" data-typeB="25" data-typeC="20" class="items">abc</div>
3<div data-typeA="30" data-typeB="55" data-typeC="60" class="items">def</div>
4<div data-typeA="95" data-typeB="45" data-typeC="40" class="items">ghi</div>
5</section>

以下のinputから「絞り込み検索」の操作を行います。
このinputのvalueの値に応じて、上記のclass="items"を表示・非表示にしたいです。

html
1<section id="sortArea">
2  <div id="typeA">
3    <input type="number" value="" class="num">
4  </div>
5  <div id="typeB">
6    <input type="number" value="" class="num">
7  </div>
8  <div id="typeC">
9    <input type="number" value="" class="num">
10  </div>
11</section>

###該当のソースコード
たとえばvalueの値が以下の場合は、class="items"は全件表示となりますが、

html
1<section id="sort">
2  <div id="typeA">
3    <input type="number" value="100" class="num">
4  </div>
5  <div id="typeB">
6    <input type="number" value="70" class="num">
7  </div>
8  <div id="typeC">
9    <input type="number" value="80" class="num">
10  </div>
11</section>

以下の場合では<div data-typeA="95" data-typeB="45" data-typeC="40" class="items">ghi</div>のみが非表示となり、それ以外のclass="items"を表示の状態としたいです。

html
1<section id="sort">
2  <div id="typeA">
3    <input type="number" value="40" class="num">
4  </div>
5  <div id="typeB">
6    <input type="number" value="60" class="num">
7  </div>
8  <div id="typeC">
9    <input type="number" value="70" class="num">
10  </div>
11</section>

ようするに、各valueの値がclass="items"のdataの値と関連しています（id="typeA"はdata-typeAに、id="typeB"はdata-typeBに、id="typeC"はdata-typeCに対応）。

つまり、すべてのvalueの値がdataの値以上の場合には表示とし、
逆にvalueのどれかひとつでも、その値がdataの値未満となる場合は非表示、としたいです。

概ねこのような機能をJavaScript（jQuery）で実装したいと考えているのですが、どのように記述すれば良いかわかりかねております。

拙い説明とは存じますが、何卒、よろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

こんな感じでしょうか

javascript
1$(function(){
2  $('[type=number]').on('change',function(){
3    $('div.items').show().filter(function(){
4      return $(this).data('typea')>$('#typeA input').val() ||
5        $(this).data('typeb')>$('#typeB input').val() ||
6        $(this).data('typec')>$('#typeC input').val() ;
7    }).hide();
8  });
9});

HTML
1
2<section id="itemArea">
3<div data-typeA="10" data-typeB="25" data-typeC="20" class="items">abc[10-25-20]</div>
4<div data-typeA="30" data-typeB="55" data-typeC="60" class="items">def[30-55-60]</div>
5<div data-typeA="95" data-typeB="45" data-typeC="40" class="items">ghi[95-45-40]</div>
6</section>
7<section id="sort">
8  <div id="typeA">
9    <input type="number" value="100" class="num">
10  </div>
11  <div id="typeB">
12    <input type="number" value="70" class="num">
13  </div>
14  <div id="typeC">
15    <input type="number" value="80" class="num">
16  </div>
17</section>