Bonito_Bonito score 65
2018/06/06 18:54 投稿
| data属性の値に配列を使用している場合、n番目が特定の値である要素を取得したい。 |
| # 実現したいこと |
| カスタムデータ属性（data-*）の値に、下記のような配列を使用しております。 |
| `<article data-post='["20180212","publish","admin"]'>...</article>` |
| ボタンを押した際、そのボタンの `data-trigger` の値と、各<article>のうち `data-post` の3番目の値とが一致している<article>のみに絞り込んで表示したいです。 |
| **./index.html** |
| ```html |
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Popular post</title> |
| </head> |
| <body> |
| <h1>Popular post</h1> |
| <button data-trigger='admin'>管理人</button> |
| <button data-trigger='k_kaneda'>兼田</button> |
| <article data-post='["20180222","publish","k_kaneda"]'> |
| <h2>投稿タイトルが入ります。ダミーテキスト</h2> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p> |
| <a href="">続きを読む</a> |
| </article> |
| <article data-post='["20180212","publish","admin"]'> |
| <h2>投稿タイトルが入ります。ダミーテキスト</h2> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p> |
| <a href="">続きを読む</a> |
| </article> |
| <article data-post='["20160308","publish","nonchan"]'> |
| <h2>投稿タイトルが入ります。ダミーテキスト</h2> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p> |
| <a href="">続きを読む</a> |
| </article> |
| <article data-post='["20171106","publish","admin"]'> |
| <h2>投稿タイトルが入ります。ダミーテキスト</h2> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p> |
| <a href="">続きを読む</a> |
| </article> |
| <article data-post='["20180422","publish","admin"]'> |
| <h2>投稿タイトルが入ります。ダミーテキスト</h2> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p> |
| <a href="">続きを読む</a> |
| </article> |
| <article data-post='["20170424","publish","nonchan"]'> |
| <h2>投稿タイトルが入ります。ダミーテキスト</h2> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p> |
| <a href="">続きを読む</a> |
| </article> |
| <script |
| src="https://code.jquery.com/jquery-3.3.1.min.js"></script> |
| <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> |
| <script type="text/javascript" src="./app.js"></script> |
| </body> |
| </html> |
| ``` |
| **./app.js** |
| ```js |
| $(document).on('click', '[data-trigger]', function() { |
| let targetValue = $(this).data('trigger'); |
| console.log(targetValue); // <= 押されたボタンの値は取れていました |
| let post = '[data-post]'; |
| let target = $(post).data('post')[2].targetValue; // <= ここがうまく行っていません |
| // 押されたタブへのクラス付与 |
| $('[data-trigger]').removeClass('js-active'); |
| $(this).addClass('js-active'); |
| // タブで絞り込み |
| $(post).hide() |
| $(target).show(); |
| }); |
| ``` |
| `let target = $(post).data('post')[2].targetValue;` の記述が間違っているためにうまく動作しない様なのですが、試したこととしてそのまま載せております。 |
| 押されたボタンの値を3番目に持っている要素を `target` に入れられれば動作する見込みなのですが… |
| ご助力いただけますと幸いです。 |
| ご助力いただけますと幸いです。 |
| ## 補足 : 属性値を配列にしている理由 |
| これまで下記のように複数の `data-*` 属性を指定していました。 |
| - `data-postDate` : 日付の絞り込みのため |
| - `data-postStatus` : 公開前の記事チェックのため |
| 今回新たに、投稿者による絞り込み機能を追加することが決定したのですが単純に `data-*` 属性を追加すると冗長になってしまうことや、今後、他のページでも属性値を取得して何かしらの処理を加えるといった改修案があるため、一つの `data-*` 属性にまとめられないかという意見のもと、試している次第です。 |
| そのため、要件が満たせるのであれば下記のように配列ではなくオブジェクトの形式でも構いません。 |
| `data-post='{"date":"20180212","status":"publish","author":"admin"}'` |
| ただしこの場合、記述量が長くなるため、できれば配列で実現したいと考えております。 |
