{"id":1046,"date":"2017-02-08T12:00:00","date_gmt":"2017-02-08T03:00:00","guid":{"rendered":"https:\/\/hi3103.net\/notes\/?p=1046"},"modified":"2022-07-09T23:33:46","modified_gmt":"2022-07-09T14:33:46","slug":"incboxfilter_select-js","status":"publish","type":"post","link":"https:\/\/hi3103.net\/notes\/web\/1046","title":{"rendered":"incboxfilter_select.js"},"content":{"rendered":"

\u6982\u8981<\/h4>\n

\u8aad\u307f\u8fbc\u3093\u3060inc\u30d5\u30a1\u30a4\u30eb\u306e\u8981\u7d20\u3092\u7d5e\u8fbc\u8868\u793a\u3059\u308bjQuery – incboxfilter.js<\/a>\u3092\u30d7\u30eb\u30c0\u30a6\u30f3\u30bb\u30ec\u30af\u30bf\u30fc\u306b\u3057\u305f\u30d0\u30fc\u30b8\u30e7\u30f3\u3002
\n\u30b9\u30bf\u30a4\u30eb\u3082\u30b7\u30f3\u30d7\u30eb\u306b\u3057\u305f\u3002<\/p>\n

\u6210\u679c\u7269<\/h4>\n

http:\/\/hi3103.net\/study\/incboxfilter_select\/<\/p>\n

HTML<\/h5>\n
<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"UTF-8\">\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\">\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"><\/script>\n    <script src=\"js\/incboxfilter_select.js\" charset=\"UTF-8\"><\/script>\n    <title>incboxfilter_select.js<\/title>\n<\/head>\n<body>\n\n    <select name=\"filter\">\n        <option value=\"all\" selected=\"selected\">Show All<\/option>\n        <option value=\"green\">Show Green Boxes<\/option>\n        <option value=\"blue\">Show Blue Boxes<\/option>\n        <option value=\"red\">Show Red Boxes<\/option>\n        <option value=\"hoge\">Show Hoge Boxes<\/option>\n    <\/select>\n\n    <div class=\"boxes\"><\/div>\n<\/body>\n<\/html><\/code><\/pre>\n
incboxfilter_select.js<\/h5>\n
$(function(){\n    $('.boxes').load('inc\/box.inc', null, function() {\n        var $filters = $('select[name=filter]');\n        var $boxes = $('.boxes a');\n\n        $filters.change(function () {\n            $('select option:selected').each(function () {\n                var $filterColor = $(this).attr('value');\n\n                if ($filterColor == 'all') {\n                    $boxes.fadeOut().promise().done(function() {\n                        $boxes.fadeIn();\n                    });\n                } else {\n                    $boxes.fadeOut().promise().done(function() {\n                        $boxes.filter('.'+$filterColor).fadeIn();\n                    });\n                }\n            });\n        });\n    });\n});<\/code><\/pre>\n
box.inc<\/h5>\n
<a class=\"red\" href=\"#\">Box1<\/a>\n<a class=\"green\" href=\"#\">Box2<\/a>\n<a class=\"blue hoge\" href=\"#\">Box3<\/a>\n<a class=\"green\" href=\"#\">Box4<\/a>\n<a class=\"red\" href=\"#\">Box5<\/a>\n<a class=\"green\" href=\"#\">Box6<\/a>\n<a class=\"blue\" href=\"#\">Box7<\/a>\n<a class=\"red hoge\" href=\"#\">Box8<\/a>\n<a class=\"green\" href=\"#\">Box9<\/a>\n<a class=\"blue\" href=\"#\">Box10<\/a>\n<a class=\"red\" href=\"#\">Box11<\/a>\n<a class=\"green hoge\" href=\"#\">Box12<\/a>\n<a class=\"blue hoge\" href=\"#\">Box13<\/a>\n<a class=\"green\" href=\"#\">Box14<\/a>\n<a class=\"red\" href=\"#\">Box15<\/a>\n<a class=\"blue\" href=\"#\">Box16<\/a><\/code><\/pre>\n
style.css<\/h5>\n
@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:#FFF;\n}\n\n.green{\n    background: lightgreen;\n}\n.blue{\n    background: lightblue;\n}\n.red{\n    background: lightcoral;\n}\n.hoge{\n    border: 2px solid #000;\n}<\/code><\/pre>\n
\u53c2\u8003URL<\/h4>\n