{"id":658,"date":"2017-10-24T13:12:53","date_gmt":"2017-10-24T04:12:53","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=658"},"modified":"2017-10-24T13:12:53","modified_gmt":"2017-10-24T04:12:53","slug":"jquery%e3%81%a7%e3%83%95%e3%82%a3%e3%83%ab%e3%82%bf%e3%83%aa%e3%83%b3%e3%82%b0","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2017\/10\/jquery%e3%81%a7%e3%83%95%e3%82%a3%e3%83%ab%e3%82%bf%e3%83%aa%e3%83%b3%e3%82%b0\/","title":{"rendered":"jQuery\u3067\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0"},"content":{"rendered":"<p><!-- \u672c\u6587 --><\/p>\n<p>jQuery\u3067\u3067\u304d\u308b\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u306e\u3054\u7d39\u4ecb\u3067\u3059\u3002<br \/>\n<!--more--><\/p>\n<p>\u4ee5\u4e0b\u304c\u30b3\u30fc\u30c9\u30b5\u30f3\u30d7\u30eb\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u25bcJavaScript<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\" >\r\n$(\"button\").click(function () {\r\n    var image = $(this).attr(\"value\");\r\n    $(\"#list li\").each(function () {\r\n        $(this).animate({\r\n            \"opacity\": 0\r\n        }, 300, function () {\r\n            $(this).hide();\r\n            if ($(this).hasClass(image) || image == \"all\") {\r\n                $(this).show();\r\n                $(this).animate({\r\n                    \"opacity\": 1\r\n                }, 300);\r\n            }\r\n        });\r\n    });\r\n});\r\n});\r\n<\/pre>\n<p>\u25bcCSS<\/p>\n<pre class=\"lang:css decode:true \" title=\"CSS\" >\r\nbutton{\r\n\tfont-size:90%;\r\n\tmargin-right:10px;\r\n\tdisplay:block;\r\n\tcolor:#E9ECEB;\r\n\tpadding:10px 30px;\r\n\tbackground:#000;\r\n\tborder-radius:20px;\r\n\tborder:none;\r\n\tdisplay:inline-block;\r\n\tcursor:pointer;\r\n}\r\n\r\n#buttons button:last-child{\r\n\tmargin-right:0;\r\n}\r\n\r\nbutton:focus{\r\n\toutline:none;\r\n}\r\n\r\nbutton:hover{\r\n\tbackground:#717171;\r\n}\r\n\r\n#list{\r\n\tmargin:10px auto 0;\r\n\tpadding:10px 10px;\r\n    max-width: 80%;\r\n    background: #ccc;\r\n    height: 650px;\r\n}\r\n\r\n#list li{\r\n\tmargin:10px;\r\n\twidth:200px;\r\n\theight:150px;\r\n\tlist-style-type:none;\r\n    display: inline-block;\r\n}\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"HTML\" >\r\n<div id=\"buttons\">\r\n    <button value=\"all\">All<\/button>\r\n    <button value=\"red\">Red<\/button>\r\n    <button value=\"blue\">Blue<\/button>\r\n    <button value=\"yellow\">Yellow<\/button>\r\n    <button value=\"fruit\">fruit<\/button>\r\n    <button value=\"flower\">flower<\/button>\r\n    <button value=\"Landscape\">\u98a8\u666f<\/button>\r\n    <button value=\"Japanese\">\u548c\u98a8<\/button>\r\n<\/div>\r\n<ul id=\"list\">\r\n    <li class=\"red fruit\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/01.jpg\" width=\"200\" height=\"150\" alt=\"item1\"><\/li>\r\n    <li class=\"yellow flower\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/02.jpg\" width=\"200\" height=\"150\" alt=\"item2\"><\/li>\r\n    <li class=\"blue Landscape\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/03.jpg\" width=\"200\" height=\"150\" alt=\"item3\"><\/li>\r\n    <li class=\"blue Landscape\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/04.jpg\" width=\"200\" height=\"150\" alt=\"item4\"><\/li>\r\n    <li class=\"red\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/05.jpg\" width=\"200\" height=\"150\" alt=\"item5\"><\/li>\r\n    <li class=\"yellow fruit\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/06.jpg\" width=\"200\" height=\"150\" alt=\"item6\"><\/li>\r\n    <li class=\"pink flower\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/07.jpg\" width=\"200\" height=\"150\" alt=\"item7\"><\/li>\r\n    <li class=\"pink Japanese\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/08.jpg\" width=\"200\" height=\"150\" alt=\"item8\"><\/li>\r\n    <li class=\"red Japanese\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/09.jpg\" width=\"200\" height=\"150\" alt=\"item9\"><\/li>\r\n    <li class=\"yellow flower\"><img decoding=\"async\" loading=\"lazy\" src=\"img\/10.jpg\" width=\"200\" height=\"150\" alt=\"item10\"><\/li>\r\n<\/ul>\r\n<\/pre>\n<p>\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001<a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/filtering\/\" target=\"_blank\">\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery\u3067\u3067\u304d\u308b\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u306e\u3054\u7d39\u4ecb\u3067\u3059\u3002<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/658"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=658"}],"version-history":[{"count":1,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/658\/revisions"}],"predecessor-version":[{"id":659,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/658\/revisions\/659"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}