Q&A
ソートらしき記述がないのですが？
具体的に何がどうなればよいのですか？
score 0
現在、Jqueryでソート機能を実装しようとしているのですが、
↓この部分でfunctionに引数をいれて$(this)を使わずに実装する方法を教えてほしいです。
score
1 2現在、Jqueryでソート機能を実装しようとしているのですが、 3↓この部分でfunctionに引数をいれて$(this)を使わずに実装する方法を教えてほしいです。 4} else { 5 $(".list").find("li").each(function(sort) { 6 if($(this).data('category-type') === cateVal) { 7 $(this).show(); 8 } else { 9 $(this).hide(); 10 } 11 }); 12 } 13 14 15・HTML 16<!doctype html> 17<html> 18 <head> 19 <meta charset="UTF-8"> 20 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 21 <meta name="format-detection" content="telephone=no"> 22 <title>jQuery</title> 23 <link rel="stylesheet" href="../../common/css/reset.css"> 24 <link rel="stylesheet" href="../../common/css/base.css"> 25 <link rel="stylesheet" href="./css/style.css"> 26 </head> 27 <body> 28 <div class="wrapper"> 29 <div class="contents"> 30 <p class="title">Frameworks</p> 31 <div class="select-wrapper"> 32 <select class="select"> 33 <option value="all">All</option> 34 <option value="css">CSS</option> 35 <option value="javascript">JavaScript</option> 36 <option value="php">PHP</option> 37 <option value="ruby">Ruby</option> 38 <option value="python">Python</option> 39 <option value="scala">Scala</option> 40 </select> 41 </div> 42 <ul class="list"> 43 <li data-category-type="css"> 44 <a href="http://getbootstrap.com/" class="article"> 45 <i class="article-icon is-bootstrap"></i> 46 <p class="article-name">Bootstrap</p> 47 </a> 48 </li> 49 <li data-category-type="ruby"> 50 <a href="http://rubyonrails.org/" class="article"> 51 <i class="article-icon is-ruby-on-rails"></i> 52 <p class="article-name">Ruby on Rails</p> 53 </a> 54 </li> 55 <li data-category-type="php"> 56 <a href="https://phalconphp.com/ja/" class="article"> 57 <i class="article-icon is-phalcon"></i> 58 <p class="article-name">Phalcon</p> 59 </a> 60 </li> 61 <li data-category-type="javascript"> 62 <a href="https://facebook.github.io/react/" class="article"> 63 <i class="article-icon is-react"></i> 64 <p class="article-name">React</p> 65 </a> 66 </li> 67 <li data-category-type="scala"> 68 <a href="https://www.playframework.com/" class="article"> 69 <i class="article-icon is-play"></i> 70 <p class="article-name">Play</p> 71 </a> 72 </li> 73 <li data-category-type="javascript"> 74 <a href="http://aurelia.io/" class="article"> 75 <i class="article-icon is-aurelia"></i> 76 <p class="article-name">Aurelia</p> 77 </a> 78 </li> 79 <li data-category-type="python"> 80 <a href="http://djangoproject.jp/" class="article"> 81 <i class="article-icon is-django"></i> 82 <p class="article-name">Django</p> 83 </a> 84 </li> 85 <li data-category-type="css"> 86 <a href="http://www.material-ui.com/#/" class="article"> 87 <i class="article-icon is-material-ui"></i> 88 <p class="article-name">Material UI</p> 89 </a> 90 </li> 91 <li data-category-type="php"> 92 <a href="https://laravel.com/" class="article"> 93 <i class="article-icon is-laravel"></i> 94 <p class="article-name">Laravel</p> 95 </a> 96 </li> 97 </ul> 98 </div> 99 </div> 100 <script src="../../common/js/jquery.js"></script> 101 <script> 102 $(function() { 103 $(".select").change(function() { 104 var cateVal = $(this).val(); 105 if(cateVal === 'all') { 106 $(".list").find("li").show(); 107 } else { 108 $(".list").find("li").each(function(sort) { 109 if($(this).data('category-type') === cateVal) { 110 $(this).show(); 111 } else { 112 $(this).hide(); 113 } 114 }); 115 } 116 }); 117 }); 118 </script> 119 </body> 120</html> 121 122 123 124・CSS 125.clearfix:after { 126 display: block; 127 clear: both; 128 content: ''; 129} 130.wrapper { 131 padding: 20px; 132} 133.contents { 134 margin: 0 auto; 135 width: 300px; 136} 137.title { 138 padding: 10px; 139 font-size: 24px; 140 font-weight: bold; 141 text-align: center; 142 background-color: #fff; 143} 144.select-wrapper { 145 margin: 10px 0; 146 text-align: right; 147} 148.select { 149 padding: 10px; 150 width: 100px; 151 font-size: 14px; 152 color: #fff; 153 border: none; 154 border-radius: 0; 155 background-color: darkcyan; 156 box-shadow: 0 1px 2px rgba(0, 0, 0, .4); 157 cursor: pointer; 158 -webkit-appearance: none; 159} 160.list > li { 161 border-top: 1px #eee solid; 162} 163.article { 164 position: relative; 165 display: table; 166 padding: 10px; 167 width: 100%; 168 background-color: #fff; 169 table-layout: fixed; 170} 171.article-icon { 172 display: table-cell; 173 width: 50px; 174 height: 50px; 175 background-size: cover; 176} 177.article-icon.is-bootstrap { background-image: url(../img/bootstrap.png); } 178.article-icon.is-material-ui { background-image: url(../img/material-ui.png); } 179.article-icon.is-react { background-image: url(../img/react.png); } 180.article-icon.is-aurelia { background-image: url(../img/aurelia.png); } 181.article-icon.is-ruby-on-rails { background-image: url(../img/ruby-on-rails.png); } 182.article-icon.is-laravel { background-image: url(../img/laravel.png); } 183.article-icon.is-phalcon { background-image: url(../img/phalcon.png); } 184.article-icon.is-django { background-image: url(../img/django.png); } 185.article-icon.is-play { background-image: url(../img/play.png); } 186.article-name { 187 display: table-cell; 188 padding-left: 20px; 189 width: 100%; 190 font-size: 16px; 191 font-weight: bold; 192 vertical-align: middle; 193} 194
現在、$(this)を使ってshowとhideのメソッドを行っているのですがそれを引数を使って$(this)を使わず今の機能を実装できるようにしたいです。
ソートは無視してよいのですね？
はい、大丈夫です。
質問下手にも関わらずお付き合いいただいたのでベストアンサーにさせていただきます。
回答1件
0
ベストアンサー
$(this)を使わない方法はないですが、リファクタリングするとこんな感じ
javascript
1$(function() { 2 $(".select").on('change',function() { 3 $(".list li").toggle($(this).val()=="all").filter('[data-category-type="'+$(this).val()+'"]').show(); 4 }); 5});
投稿2020/04/01 10:12
総合スコア114769
言葉が足りずすみません。
eachの関数内に引数を使ってやる方法をよろしければ教えてほしいです。
> eachの関数内に引数を使ってやる方法
ごめんなさい、ちょっと意味がわからない
私の提示したものでは想定した結果とことなりますか？
やりたいことはできていますが、やり方が少し異なっているという感じです。
each(function()) ()の部分に引数をいれてそれ以降に記述されている$(this)を削除する方法を知りたいです。
each(function(sort)) に入っているsortはミスですので気にしないでください
もしかし「削除」というのは見せる・見せないではなく
ほんとに削除するということですか？
あなたの回答
tips
プレビュー
