JavascriptかJQueryでトグル機能を実装し、表示の切り替えを行いたい

Question

よろしくお願い致します。

JavascriptかJQueryでトグル機能を実装し、表示の切り替えを行いたいと思っています。

具体的な内容
合計100件程度のデータがあり、html上のボタンを押すと件数がフィルタリングされる機能を実装しました。

例
ボタン０　　ボタンを押すと全件表示される
ボタン１　　ボタンを押すと30件がフィルターされ、合計７０件が表示される
ボタン２　　ボタンを押すと70件がフィルターされ、合計3０件が表示される

※ブラウザーロード時は１００件が表示された状態となります。

やりたいこと
ボタン１と２に関して、ボタンを１回押した際は件数がフィルターされるのですが、同じボタンを再度押した際には元の合計件数（１００件）に切り替えたいと思っています。この２回目の切り替えの実装がうまくいっておりません。

HTML（ボタン）

            <ul class="map-tab">
            	<li class="map-tab_item" data-category="">全て表示</li>
            	<li class="map-tab_item" data-category="1">りんご</li>
            	<li class="map-tab_item" data-category="2">みかん</li>
            	<li class="map-tab_item" data-category="3">なし</li>
            </ul>

JS

$('[data-category]').on('click', function() {
	var category = $(this).data('category');
	change_category(category);
});

function change_category(category) {
	// 表示されている吹き出しを非表示にする
	infoWindows_hide();
	// カテゴリ別に切り替える場合
	if(category !== '') {
		for (var i = 0; i < mapData.length; i++) {
			var item = mapData[i];
			item['marker'].setVisible(false);
			for (var j = 0; j < item['category'].length; j++) {
				if(item['category'][j] === category) {
					item['marker'].setVisible(true);
					break;
				}
			}
		}
	// 全件表示の場合
	} else {
		for (var i = 0; i < mapData.length; i++) {
			mapData[i]['marker'].setVisible(true);
		}
	}
}

知りたいこと

上記のコードの場合に、どのようにコードを変更すれば意図した表示結果となるのか知りたいです。

Answer 1

とりあえず10件で

<script>
$(function(){
  $('#ball').on('click',function(){
    $('.map-tab_item').show();
  });
  $('#b1,#b2').on('click',function(){
    var v=parseInt($(this).val());
    $('.map-tab_item').each(function(){
      $(this).toggle($.inArray(v,$(this).data('category'))>=0);
    });
  });
});
</script>
<input type="button" value="all" id="ball">
<input type="button" value="1" id="b1">
<input type="button" value="2" id="b2">
<ul class="map-tab">
<li class="map-tab_item" data-category="[1,2]">1</li>
<li class="map-tab_item" data-category="[1,2]">2</li>
<li class="map-tab_item" data-category="[1]">3</li>
<li class="map-tab_item" data-category="[1]">4</li>
<li class="map-tab_item" data-category="[1]">5</li>
<li class="map-tab_item" data-category="[1]">6</li>
<li class="map-tab_item" data-category="[1]">7</li>
<li class="map-tab_item" data-category="[2]">8</li>
<li class="map-tab_item" data-category="[]">9</li>
<li class="map-tab_item" data-category="[]">10</li>
</ul>

Comments

[tomato01]

ご回答を頂き誠にありがとうございます。
頂いたコードでなんとなくイメージがつかめました。ありがとうございます。