{"id":1048,"date":"2017-02-09T12:00:00","date_gmt":"2017-02-09T03:00:00","guid":{"rendered":"https:\/\/hi3103.net\/notes\/?p=1048"},"modified":"2022-07-09T23:33:47","modified_gmt":"2022-07-09T14:33:47","slug":"2%e3%81%a4%e3%81%ae%e3%83%97%e3%83%ab%e3%83%80%e3%82%a6%e3%83%b3%e3%81%8b%e3%82%89%e8%a6%81%e7%b4%a0%e3%81%ae%e7%b5%9e%e8%be%bc%e8%a1%a8%e7%a4%ba%e3%82%92%e3%81%99%e3%82%8bjquery-boxfilter_double-js","status":"publish","type":"post","link":"https:\/\/hi3103.net\/notes\/web\/1048","title":{"rendered":"2\u3064\u306e\u30d7\u30eb\u30c0\u30a6\u30f3\u304b\u3089\u8981\u7d20\u306e\u7d5e\u8fbc\u8868\u793a\u3092\u3059\u308bjQuery &#8211; boxfilter_double.js"},"content":{"rendered":"<h4>\u6982\u8981<\/h4>\n<p><a href=\"https:\/\/hi3103.net\/notes\/web\/1046\">incboxfilter_select.js<\/a>\u3092\u3055\u3089\u306b\u6539\u9020\u3057\u3066\u30012\u3064\u306e\u30d7\u30eb\u30c0\u30a6\u30f3\u30bb\u30ec\u30af\u30bf\u30fc\u3067\u8981\u7d20\u306e\u7d5e\u8fbc\u8868\u793a\u3092\u3059\u308b\u3002<\/p>\n<h4>\u6210\u679c\u7269<\/h4>\n<ul>\n<li>https:\/\/hi3103.net\/study\/boxfilter_double\/<\/li>\n<li>https:\/\/hi3103.net\/study\/incboxfilter_double\/\n<ul>\n<li>inc\u30d5\u30a1\u30a4\u30eb\u306e\u5834\u5408<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>HTML<\/h5>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"&gt;\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"js\/boxfilter_double.js\"&gt;&lt;\/script&gt;\n    &lt;title&gt;boxfilter_double.js&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n    &lt;select name=\"filter_area\" class=\"filters\"&gt;\n        &lt;option value=\"area_all\" selected=\"selected\"&gt;Show All Area&lt;\/option&gt;\n        &lt;option value=\"area_1\"&gt;Show Area_1&lt;\/option&gt;\n        &lt;option value=\"area_2\"&gt;Show Area_2&lt;\/option&gt;\n        &lt;option value=\"area_3\"&gt;Show Area_3&lt;\/option&gt;\n        &lt;option value=\"area_4\"&gt;Show Area_4&lt;\/option&gt;\n    &lt;\/select&gt;\n\n    &lt;select name=\"filter_genre\" class=\"filters\"&gt;\n        &lt;option value=\"genre_all\" selected=\"selected\"&gt;Show All Genre&lt;\/option&gt;\n        &lt;option value=\"genre_1\"&gt;Show Genre_1&lt;\/option&gt;\n        &lt;option value=\"genre_2\"&gt;Show Genre_2&lt;\/option&gt;\n        &lt;option value=\"genre_3\"&gt;Show Genre_3&lt;\/option&gt;\n    &lt;\/select&gt;\n\n    &lt;div class=\"boxes\"&gt;\n        &lt;a class=\"area_1 genre_1 genre_2\" href=\"#\"&gt;Box1&lt;\/a&gt;\n        &lt;a class=\"area_2 genre_1 genre_3\" href=\"#\"&gt;Box2&lt;\/a&gt;\n        &lt;a class=\"area_3 genre_2 genre_3\" href=\"#\"&gt;Box3&lt;\/a&gt;\n        &lt;a class=\"area_4 genre_3\" href=\"#\"&gt;Box4&lt;\/a&gt;\n        &lt;a class=\"area_1 genre_1 genre_2 genre_3\" href=\"#\"&gt;Box5&lt;\/a&gt;\n        &lt;a class=\"area_2 genre_1 genre_2\" href=\"#\"&gt;Box6&lt;\/a&gt;\n        &lt;a class=\"area_3 genre_1 genre_3\" href=\"#\"&gt;Box7&lt;\/a&gt;\n        &lt;a class=\"area_4 genre_1 genre_2 genre_3\" href=\"#\"&gt;Box8&lt;\/a&gt;\n        &lt;a class=\"area_1 genre_1 genre_3\" href=\"#\"&gt;Box9&lt;\/a&gt;\n        &lt;a class=\"area_2 genre_1 genre_2 genre_3\" href=\"#\"&gt;Box10&lt;\/a&gt;\n        &lt;a class=\"area_3 genre_3\" href=\"#\"&gt;Box11&lt;\/a&gt;\n        &lt;a class=\"area_4 genre_1 genre_2 genre_3\" href=\"#\"&gt;Box12&lt;\/a&gt;\n        &lt;a class=\"area_1 genre_1 genre_2 genre_3\" href=\"#\"&gt;Box13&lt;\/a&gt;\n        &lt;a class=\"area_2 genre_1 genre_3\" href=\"#\"&gt;Box14&lt;\/a&gt;\n        &lt;a class=\"area_3 genre_1 genre_2\" href=\"#\"&gt;Box15&lt;\/a&gt;\n        &lt;a class=\"area_4 genre_1 genre_3\" href=\"#\"&gt;Box16&lt;\/a&gt;\n        &lt;a class=\"area_1 genre_3\" href=\"#\"&gt;Box17&lt;\/a&gt;\n        &lt;a class=\"area_2 genre_1 genre_2 genre_3\" href=\"#\"&gt;Box18&lt;\/a&gt;\n        &lt;a class=\"area_3 genre_1 genre_2 genre_3\" href=\"#\"&gt;Box19&lt;\/a&gt;\n        &lt;a class=\"area_4 genre_1 genre_2\" href=\"#\"&gt;Box20&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h5>boxfilter_double.js<\/h5>\n<pre><code class=\"language-javascript\">$(document).ready(function(){\n\n    var $boxes = $('.boxes a');\n\n    $('select.filters').change(function () {\n        $boxes.removeClass('match');\n\n        $('select[name=filter_area] option:selected').each(function () {\n            var $sa = $(this).attr('value');\n            if($sa == 'area_all'){\n                $boxes.addClass('match');\n            }else if($boxes.hasClass($sa)){\n                $boxes.filter('.'+$sa).addClass('match');\n            }\n        });\n        $('select[name=filter_genre] option:selected').each(function () {\n            var $sg = $(this).attr('value');\n            if($sg != 'genre_all' &amp;&amp; $boxes.hasClass('match')){\n                $boxes.filter(':not(.'+$sg+')').removeClass('match');\n            }\n        });\n\n        $boxes.fadeOut().promise().done(function() {\n            $boxes.filter('.match').fadeIn();\n        });\n    });\n});<\/code><\/pre>\n<h5>style.CSS<\/h5>\n<pre><code class=\"language-css\">@charset \"UTF-8\";\n\na {\n    display: inline-block;\n    text-decoration: none;\n    text-align: center;\n    margin-bottom: 1em;\n    margin-right: 1em;\n}\n\n.boxes a {\n    width: 10em;\n    color:#CCC;\n}\n\n.area_1{ border: 2px solid gold; }\n.area_2{ border: 2px solid lightblue; }\n.area_3{ border: 2px solid lightgreen; }\n.area_4{ border: 2px solid pink; }\n\n.match{\n    background-color: #000;\n    color: #FFF;\n}<\/code><\/pre>\n<h4>\u53c2\u8003URL<\/h4>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\/Reference\/Operators\">\u5f0f\u3068\u6f14\u7b97\u5b50 &#8211; JavaScript | MDN<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u6982\u8981 incboxfilter_select.js\u3092\u3055\u3089\u306b\u6539\u9020\u3057\u3066\u30012\u3064\u306e\u30d7\u30eb\u30c0\u30a6\u30f3\u30bb\u30ec\u30af\u30bf\u30fc\u3067\u8981\u7d20\u306e\u7d5e\u8fbc\u8868\u793a\u3092\u3059\u308b\u3002 \u6210\u679c\u7269 https:\/\/hi3103.net\/study\/boxfilter_double\/ htt [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[45,44,46],"class_list":["post-1048","post","type-post","status-publish","format-standard","hentry","category-web","tag-javascript","tag-jquery","tag-product"],"_links":{"self":[{"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/posts\/1048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/comments?post=1048"}],"version-history":[{"count":0,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/posts\/1048\/revisions"}],"wp:attachment":[{"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/media?parent=1048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/categories?post=1048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/tags?post=1048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}